在选择器中使用 :target 伪类
为了辅助标识那些指向文档特定部分链接的目标,CSS3 选择器 引入了 :target
伪类. Netscape 7.1 已经在 Netscape 系列中加入了这个伪类的支持,这一新的举措让页面作者能够辅助用户在较大的页面中定位。
选择一个目标
:target
伪类用来指定那些包含片段标识符的 URI 的目标元素样式。例如 https://developer.mozilla.org/zh-CN/docs/Web/CSS#参考
这个 URI 包含了 #参考
片段标识符 在 HTML 中,标识符是元素的 id
或者 name
属性。由于这两者位于相同的命名空间,因此,这个示例 URI 指向的是文档顶层的“参考”。
假设你想修改 URI 指向的任何 h2 元素,但是又不想把样式应用到任何其他同类型的元素,那么以下示例足够简单有用:
css
h2:target {
font-weight: bold;
}
同样的,将样式应用于特定的文档片段也是可行的。这是通过使用 URI 中相同的标识符实现的。例如,要在 #Example 文档片段中加入边框,我们可以通过如下代码实现:
css
#Example:target {
border: 1px solid black;
}
定位所有元素
如果想要创建应用于所有目标元素的样式,那么可以使用通用选择器:
css
:target {
color: red;
}
示例
在以下示例中,5 个链接指向了同一文档中的元素。例如,选择 "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>
结论
在片段标识符指向部分文档的情况下,读者可能会对到底应该阅读文档的哪一部分感到疑惑。通过对不同的目标元素的样式进行修饰,读者的相关疑惑会减少或者消除。
相关链接
Original Document Information
- Author(s): Eric Meyer, Standards Evangelist, Netscape Communications
- Last Updated Date: Published 30 Jun 2003
- Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
- Note: This reprinted article was originally part of the DevEdge site.