CSS - 伪类

CSS 伪代码-class :target 指向一个特定元素，称为目标元素，其 id 与 URL 中的片段标识符匹配。

语法

:target {
   /* css declarations */
 }

CSS :target  链接元素

以下示例演示如何使用 :target 伪类来突出显示已链接到锚点的页面部分

这里我们看到<a>标签指向#demo-target1和#demo-target2。这分别指向一个名为 demo-target1 和 demo-target2 的元素。

<html>
<head>
<style>
   #demo-target1 {
      background-color: yellow;
      padding: 10px;
      margin: 20px 20px 20px 20px;
   }
   #demo-target2 {
      background-color: lightgray;
      padding: 10px;
      margin: 20px 20px 20px 20px;
   }
   #demo-target2:target {
      background-color: red;
      color: white;
      }
   #demo-target1:target {
      background-color: red;
      color: white;
   }
</style>
</head>
<body>
<div>
<a href="#demo-target1">单击此处定位 ELEMENT-1 并将其颜色变为红色</a>
</div>
<br>
<div>
<a href="#demo-target2">单击此处以 ELEMENT-2 为目标并将其颜色变为红色</a>
</div>
<div id="demo-target1">
   <p>这就是目标元素 ELEMENT-1 </p>
</div>
<div id="demo-target2">
   <p> 这就是目标元素 ELEMENT-2 </p>
</div>
</body>
</html>

CSS :target  不存在目标

以下示例演示了 :target 伪类如何不存在'不会影响没有设置目标的链接。

<html>
<head>
<title>:target with ID</title>
<style>
   #demo-target {
      background-color: yellow;
      padding: 10px;
   }
   #demo-target:target {
      background-color: red;
      color: white;
   }
</style>
</head>
<body>
<h1>点击下面的链接可以看到:target with ID的效果</h1>
<ul>
   <li><a href="#demo-target">Target Element</a></li>
   <li><a href="#other">Other Element</a></li>
</ul>
<div id="demo-target">
   <h2>这是 target element</h2>
   <p>当该元素是URL片段标识符的目标时，其背景颜色变为红色，文本颜色变为白色。</p>
</div>
<div id="other">
   <h2>这是另一个 element</h2>
   <p>该元素不受 :target 选择器影响。</p>
</div>
</body>
</html>
:target 在 Web 组件中不起作用，因为影子根不会将目标元素传递到影子树就应该如此。