例如,如果你的URL是 http://example.com#section1,并且页面中有一个元素具有id为 section1,那么:target选择器将匹配该具有id="section1"的元素。
以下是一个简单的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 默认样式 */
div {
display: none;
}
/* :target 伪类样式,当有元素被选中时显示 */
div:target {
display: block;
}
</style>
</head>
<body>
<a href="#section1">显示 Section 1</a>
<a href="#section2">显示 Section 2</a>
<div id="section1">这是第一部分的内容。</div>
<div id="section2">这是第二部分的内容。</div>
</body>
</html>
在这个例子中,当用户点击 "显示 Section 1" 或 "显示 Section 2" 时,相应的部分将被显示。:target伪类使得你可以根据URL的锚点动态地样式化和显示特定的部分。
转载请注明出处:http://www.zyzy.cn/article/detail/4267/CSS