单击文本或制作时显示另一个元素：失去焦点后焦点显示

Question

我的目的是在点击p（使用“显示我”文本）时显示带有show类的span标记。我曾尝试使用:focus伪选择器执行此操作，但使用此方法只会显示p标记，直到其他位置被单击，p标记再次隐藏。

有没有办法让:focus选择器显示，即使在点击之后（或）有一个不同的/更好的方式（不使用JS）在点击Show Me时显示p并且即使在外面点击之后也能保持这种状态？

Fiddle Demo

HTML CODE

<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>

---

IE＆lt; = 8不支持

^[1] - :target选择器。