CSS :target伪类针对HTML id无效的问题排查

你的#intro:target样式不生效的核心原因很简单：#intro元素从来没成为过URL锚点的目标元素。

先搞懂:target伪类的工作逻辑 #

:target伪类只会匹配当前URL锚点（即地址栏中#后面的内容）对应的页面元素——当URL里的锚点值和某个元素的id完全一致时，这个元素才会被:target选中。

对照你的代码来看问题 #

你的示例代码里：

• 链接的href是#lit，点击后URL的锚点会变成#lit，此时只有id="lit"的<p>元素会被:target匹配。
• 你的<ul>元素id是intro，但没有任何链接指向#intro，所以它永远不会成为锚点目标，#intro:target选择器自然不会触发样式。

而你单独用:target时，点击链接后#lit元素被选中，样式就会作用在它身上，所以看起来生效了。

怎么让#intro:target生效？ #

如果你的需求是让#intro在被锚点指向时显示样式，只需要添加一个指向它的链接即可：

<a href="#intro">跳转到intro</a>
<ul id="intro">
    <li><a href="#lit">menu test</a></li>
</ul>
<p id="lit"> affected</p>

点击这个新链接后，URL锚点变成#intro，#intro:target的样式就会生效。

内容的提问来源于stack exchange，提问作者YeonSoo Jung