极客笔记CSS css3结构性伪类选择器target用法
1. 介绍
在CSS中，我们可以通过选择器来选择需要样式化的元素。而在CSS3中，新增了一些非常有用的选择器，其中之一就是结构性伪类选择器:target。:target选择器可以用于选择当前活动的目标元素，它通常与锚点（Anchor）标签一起使用，并且在页面中经常用于创建标签页、导航菜单以及滚动页面到指定位置等场景。
本文将详细介绍:target选择器的用法，包括基本用法、属性选择器结合、动画效果以及:target选择器的局限性等内容。
2. 基本用法
:target选择器与锚点标签（<a>）结合使用，通过在锚点的href属性中指定要选择的元素的ID，就可以选中该目标元素。
示例代码如下：
<a href="#target-element">点击选择目标元素</a>
<div id="target-element">
目标元素的内容
</div>
在上面的代码中，当点击锚点时，将会将id为target-element的<div>元素选择到，并应用相应的样式。
3. 属性选择器结合
除了与锚点标签结合使用之外，:target选择器还可以与属性选择器结合，以选择目标元素的特定属性。
示例代码如下：
<a href="#target-element" role="button">点击选择目标元素</a>
<div id="target-element" role="button">
目标元素的内容
</div>
在上面的代码中，通过:target[role="button"]选择器，会选择拥有role属性值为"button"的目标元素，并将样式应用于该元素。
4. 动画效果
利用:target选择器，我们还可以通过CSS的过渡（transition）属性或者动画（animation）属性为目标元素添加动画效果。
示例代码如下：
<style>
#target-element {
opacity: 0;
transition: opacity 1s;
}
#target-element:target {
opacity: 1;
}
</style>
<a href="#target-element">点击选择目标元素</a>
<div id="target-element">
目标元素的内容
</div>
在上面的代码中，目标元素初始时透明度为0，通过:target选择器及过渡效果，当点击锚点选择目标元素后，元素的透明度会渐变为1，实现了一个简单的淡入效果。
5. 局限性
虽然:target选择器非常有用，但是它也有一些限制。
首先，:target选择器只能选取DOM树上Id匹配的元素，因此目标元素必须具有一个唯一的id属性。
其次，在页面首次加载时，:target选择器不会应用样式，而只有通过点击等操作来选中目标元素时才会应用样式。这意味着如果你想要在页面加载时就应用某个元素的样式，你不能将该元素作为:target选择器的目标。
最后，:target选择器只能选择直接成为当前活动目标的元素，而无法选择其祖先或后代元素。这也意味着:target选择器不能用于页面上的动态导航菜单等复杂动态效果。
6. 总结
CSS3中的:target选择器是一种非常有用的选择器，它可以选择当前活动的目标元素，常与锚点标签一起使用。通过:target选择器，我们可以根据用户的操作状态来改变元素的样式，例如在点击导航菜单时高亮显示对应的内容。
虽然:target选择器有一些限制，但是在合适的场景下它仍然是非常实用的。在实际开发中，我们可以巧妙地运用:target选择器，为页面添加更丰富的交互效果。