html - 单击文本时显示另一个元素或使 :focus display after loosing focus

Question

我的目标是在单击 span(带有 Show Me 文本)时显示带有 show 类的 p 标签。我曾尝试使用 :focus 伪选择器来执行此操作，但使用此方法使得 p 标记仅在单击其他位置之前显示，其中 p 标签再次被隐藏。

是否有任何方法可以使 :focus 选择器即使在单击后仍显示(或者)是否有不同/更好的方法(不使用 JS)来显示 p 当点击 Show Me 时，即使在点击外部后它仍保持原样？

Fiddle Demo

HTML代码

<span class="span1" tabindex="0">Show Me</span>
<p class="show" >This will show on click</p>

CSS 代码

body {
  display: block;
}
.show {
  display: none;
}
.span1:focus ~ .show {
  display: block;
}

Answer 1

:focus 伪类将不起作用，因为正如命名所表明的那样，它仅适用于焦点位于元素上并且无法使焦点“粘住”甚至在我们点击其他地方之后。

实现此目的的另一种方法是使用 :target ^[1] 伪类/选择器。这将使 p 在单击链接时显示，因为它被视为“目标”。

body {
  display: block;
}
.show {
  display: none;
}
#content:target {
  display: block;
}

<a class="span1" href='#content'>Show Me</a>

<p class="show" id='content'>This will show on click</p>

---

^[1] - :target IE <= 8 不支持选择器。