在CSS中,:target 是一个伪类选择器,它用于选择当前活动的目标元素。具体而言,它匹配URL的片段标识符(通常是页面中的锚点)。当用户点击页面中的锚点链接时,与该锚点对应的元素将成为:target伪类的目标。

例如,如果你的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