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

我的目标是在单击

span

（带show Me text）时，显示带有

show

类的

p

标记。我曾尝试使用

：focus

伪选择器执行此操作，但使用此方法会使

p

标记仅在单击其他位置之前显示，此时

p

标记再次隐藏

是否有任何方法可以使

：焦点

选择器在单击“远离”后仍能显示（或者）是否有其他/更好的方法（不使用JS）在单击“显示我”时显示

p

，并使其在单击“外部”后仍保持该状态

HTML代码

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

---

：focus

伪类将不起作用，因为正如命名所示，它仅在焦点位于元素上时适用，并且即使在单击其他位置后也无法使焦点“粘住”

实现这一点的另一种方法是使用

：target

[1]伪类/选择器。这将使

p

在单击链接时显示，因为它被视为“目标”

正文{
显示：块；
}
.表演{
显示：无；
}
#内容：目标{
显示：块；
}

这将在单击时显示

，

:focus

伪类将不起作用，因为正如命名所示，它仅在焦点位于元素上时适用，即使在单击其他位置后也无法使焦点“粘住”

实现这一点的另一种方法是使用

：target

[1]伪类/选择器。这将使

p

在单击链接时显示，因为它被视为“目标”

正文{
显示：块；
}
.表演{
显示：无；
}
#内容：目标{
显示：块；
}

这将在单击时显示

将有其他方法来实现这一点，但不是通过使

:focus

保持不变，因为这不是伪代码的目的，对吗？我想除了使用JS之外，没有其他方法可以阻止它。是一种可能性，但涉及更改标记。在不知道使用上下文的情况下，我不会推荐这个作为答案。事实上，这正是我想要实现的。谢谢。有其他方法可以实现这一点，但不是通过使

：focus

保持不变，因为这不是伪代码的目的，对吗？我想除了使用JS之外，没有其他方法可以阻止它。是一种可能性，但涉及更改标记。在不知道使用上下文的情况下，我不会推荐这个作为答案。事实上，这正是我想要实现的。谢谢

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