在选择器中使用 :target 伪类

选择目标

:target 伪类用于为文档中通过 URL 片段标识符确定的目标元素设置样式。例如，URL https://developer.mozilla.org/zh-CN/docs/Web/CSS#参考 包含片段标识符 #参考。在 HTML 中，标识符通常作为 id 或 name 属性的值出现，因为这两个属性共享同一命名空间。因此，上述示例 URL 将指向该文档中 id 为 参考 的元素。

若要为作为 URL 目标的任何 h2 元素设置样式，同时不影响其他类型的元素使其获得目标样式，请将 :target 伪类与类型选择器结合使用：

h2:target {
  outline: 2px solid;
}

同样的，将样式应用于特定的文档片段也是可行的。这是通过使用 URI 中相同的标识符实现的。例如，要在 #参考 文档片段中加入背景颜色，我们可以通过如下代码实现：

#参考:target {
  background-color: yellow;
}

定位所有元素

如果想要创建应用于所有目标元素的样式，那么可以使用通用选择器：

:target {
  color: red;
}

示例

在以下示例中，5 个链接指向了同一文档中的元素。例如，选择链接“一”会导致 <h1 id="one"> 成为目标元素。注意，由于目标元素有可能会被放置到浏览器窗口的顶层，因此文档可能会跳到新的滚动位置。

<h4 id="one">…</h4>
<p id="two">…</p>
<div id="three">…</div>
<a id="four">…</a> <em id="five">…</em>

<a href="#one">一</a>
<a href="#two">二</a>
<a href="#three">三</a>
<a href="#four">四</a>
<a href="#five">五</a>

结论

当片段标识符指向文档的某一部分时，读者可能会对应该阅读文档的哪一部分感到困惑。通过对 URI 的目标进行样式设置，可以减少或消除读者的困惑。

参见

• :target