CSS - 伪类 :target

CSS 伪类 :target 指向一个特定元素，称为 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">Click here to target the ELEMENT-1 and turn its color to red</a>
</div>
<br>
<div>
<a href="#demo-target2">Click here to target the ELEMENT-2 and turn its color to red </a>
</div>
<div id="demo-target1">
	 	<p>This is the target ELEMENT-1 </p>
</div>
<div id="demo-target2">
	 	<p> This is the target 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>Click on the links below to see the effect of :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>This is the target element</h2>
	 	<p>When this element is the target of the URL fragment identifier, its background color changes to red and the text color changes to white.</p>
</div>
<div id="other">
	 	<h2>This is another element</h2>
	 	<p>This element is not affected by the :target selector.</p>
</div>
</body>
</html>

:target 在 Web 组件中不起作用，因为影子根不会按应有的方式将目标元素传递到影子树中。

打印本页