什么是CSS的:target选择器

北原_春希2024-06-13 22:59

CSS的:target选择器用于选择当前活动的目标元素。当页面上的一个链接被点击，并且该链接指向一个页面内的元素（通过ID）时，被链接的元素就会成为目标元素，此时:target选择器就可以用来选择并应用样式到这个元素上。

这种选择器常常与页面内的导航（如Tab导航、折叠面板等）和"返回顶部"功能一起使用。

下面是一个简单的例子，展示了如何使用:target选择器来创建一个基本的Tab导航：

HTML:

html 复制代码

<nav>  
  <a href="#tab1">Tab 1</a>  
  <a href="#tab2">Tab 2</a>  
  <a href="#tab3">Tab 3</a>  
</nav>  
  
<div id="tab1" class="tab-content">Content for Tab 1</div>  
<div id="tab2" class="tab-content">Content for Tab 2</div>  
<div id="tab3" class="tab-content">Content for Tab 3</div>

CSS:

css 复制代码

.tab-content {  
  display: none; /* 默认隐藏所有tab内容 */  
}  
  
.tab-content:target {  
  display: block; /* 当tab内容被选中时，显示该内容 */  
}

在这个例子中，所有的.tab-content元素默认都是隐藏的。但是，当用户点击一个链接（如#tab2）时，对应的div（即id="tab2"的元素）就会被选中，并且:target选择器会将其display属性设置为block，从而显示该元素的内容。

注意，:target选择器只影响URL中当前的目标元素。如果用户刷新页面或者导航到另一个页面，然后再回来，之前的选中状态将不会保留，除非使用JavaScript或其他技术来保持状态。