CSS3 target 属性
CSS3 target 属性
target 属性可以用于为页面中的特定元素定义样式，该属性通过将链接的 href 属性值与 id 属性值进行匹配实现。当用户单击链接并跳转到另一个页面时，页面将滚动到拥有相同 id 属性值的元素，并应用 target 属性中定义的样式。
语法与用法
target 属性的语法如下：
target[id] {
/* 属性 */
}
上述语法中，target 表示 href 属性中指向 id 属性值的链接样式， id 表示将被匹配的元素的 id 属性值，[id] 表示元素拥有 id 属性。
target 属性可以添加到链接中，如下所示：
<a href="#ID" target="[ID]">链接文本</a>
上述代码中的 #ID 是在当前页面中要跳转到的元素的 id 属性值，[ID] 是要匹配的元素的 id 属性值。
实例
下面是一个通过 target 属性为链接定义样式的示例：
<!DOCTYPE html>
<html>
<head>
<style>
/* 设置 target 属性 */
#section1:target {
background-color: yellow;
}
#section2:target {
background-color: blue;
color: white;
}
#section3:target {
background-color: green;
color: white;
}
</style>
</head>
<body>
<h1>CSS3 target 属性</h1>
<p><a href="#section1">跳转到 Section 1</a></p>
<p><a href="#section2">跳转到 Section 2</a></p>
<p><a href="#section3">跳转到 Section 3</a></p>
<h2 id="section1">Section 1</h2>
<p>这是 Section 1 的内容。</p>
<h2 id="section2">Section 2</h2>
<p>这是 Section 2 的内容。</p>
<h2 id="section3">Section 3</h2>
<p>这是 Section 3 的内容。</p>
</body>
</html>
在上面的示例中，当用户单击带有 href="#section1" 的链接时，页面将跳转到具有 id="section1" 的元素，并应用 #section1:target 中定义的样式。
浏览器兼容性
target 属性在所有主流浏览器中得到了完美的支持。
总结
通过使用 target 属性，可以为指向页面中不同元素的链接定义样式，从而为网页添加更多的交互和可读性。虽然它的使用非常简单直接，但是需要注意的是，在为大型项目编码时，target 滚动位置的变化会干扰页面的 UI 和功能，因此在使用中需要谨慎。