在选择器中使用 :target 伪类

当 URL 使用URL 片段标识符指向文档的特定部分时,用户可能很难注意到。本指南讨论如何使用 CSS 引起用户对 URL 目标的注意,以改善用户体验。

选择目标

伪类:target用于样式化使用 URL 片段标识符标识的文档的目标元素。例如,URL https://mdn.org.cn/en-US/docs/Web/CSS#reference 包含片段标识符 #reference。在 HTML 中,标识符是 idname 属性的值,因为两者共享相同的命名空间。因此,示例 URL 将指向文档中 ID 为 reference 的元素。

要为作为 URL 目标的任何 h2 元素设置样式,同时不影响任何其他类型的元素以获得目标样式,请将 :target 伪类与类型选择器一起使用。

css
h2:target {
  outline: 2px solid;
}

还可以创建特定于文档特定片段的样式。这是使用与 URI 中相同的标识值完成的。因此,要为 #reference 片段添加背景颜色,我们将编写

css
#reference:target {
  background-color: yellow;
}

定位所有元素

如果目的是创建适用于所有目标元素的“通用”样式,则通用选择器将派上用场。

css
:target {
  color: red;
}

示例

在以下示例中,有五个链接指向同一文档中的元素。例如,选择“First”链接将导致 <h1 id="one"> 成为目标元素。请注意,文档可能会跳转到新的滚动位置,因为如果可能,目标元素会放置在浏览器窗口的顶部。

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

<a href="#one">First</a>
<a href="#two">Second</a>
<a href="#three">Third</a>
<a href="#four">Fourth</a>
<a href="#five">Fifth</a>

总结

在片段标识符指向文档某一部分的情况下,读者可能会对他们应该阅读文档的哪一部分感到困惑。通过样式化 URI 的目标,可以减少或消除读者的困惑。

另见