选择目标
伪类:target用于样式化使用 URL 片段标识符标识的文档的目标元素。例如,URL https://mdn.org.cn/en-US/docs/Web/CSS#reference 包含片段标识符 #reference。在 HTML 中,标识符是 id 或 name 属性的值,因为两者共享相同的命名空间。因此,示例 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 的目标,可以减少或消除读者的困惑。