例如,如果你有一个链接指向文档中的某个具体部分,通过 :target 你可以选择这个被链接指向的特定元素。
下面是一个简单的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 当链接指向的元素成为活动目标时应用样式 */
:target {
background-color: yellow;
}
</style>
<title>Target Pseudo-class Example</title>
</head>
<body>
<p id="section1">Section 1</p>
<p id="section2">Section 2</p>
<!-- 链接到页面中的某个特定部分 -->
<a href="#section1">Go to Section 1</a>
<a href="#section2">Go to Section 2</a>
</body>
</html>
在这个例子中,当你点击 "Go to Section 1" 或 "Go to Section 2" 链接时,被链接指向的段落(<p> 元素)会应用 :target 伪类定义的样式,即背景颜色变为黄色。
请注意,target 伪类主要用于处理文档内的锚点链接,而不是处理在 CSS 中直接设置的目标元素。
转载请注明出处:http://www.pingtaimeng.com/article/detail/6131/CSS