什么是CSS的:target选择器

简介: 什么是CSS的:target选择器

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

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

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

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:

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

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

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

相关文章
|
23天前
|
缓存 前端开发
CSS基础+基本选择器和复合选择器(如果想知道CSS的基础+基本选择器和复合选择器知识点,那么只看这一篇就足够了!)
CSS基础+基本选择器和复合选择器(如果想知道CSS的基础+基本选择器和复合选择器知识点,那么只看这一篇就足够了!)
|
20天前
|
移动开发 前端开发 HTML5
2024.3.30-认识 CSS (文本样式、复合选择器)
2024.3.30-认识 CSS (文本样式、复合选择器)
|
16天前
|
前端开发
CSS选择器详解与应用实例
CSS选择器详解与应用实例
116 44
|
9天前
|
前端开发 JavaScript 算法
CSS【详解】样式选择器的优先级(含提升优先级的方法)
CSS【详解】样式选择器的优先级(含提升优先级的方法)
10 0
CSS【详解】样式选择器的优先级(含提升优先级的方法)
|
16天前
|
前端开发 开发者
CSS伪类选择器:增强内容表现力的利器
CSS伪类选择器:增强内容表现力的利器
15 4
|
23天前
|
前端开发
CSS基础之伪元素选择器(如果想知道CSS的伪元素选择器知识点,那么只看这一篇就足够了!)
CSS基础之伪元素选择器(如果想知道CSS的伪元素选择器知识点,那么只看这一篇就足够了!)
|
23天前
|
前端开发
CSS基础之伪类选择器(如果想知道CSS的伪类选择器知识点,那么只看这一篇就足够了!)
CSS基础之伪类选择器(如果想知道CSS的伪类选择器知识点,那么只看这一篇就足够了!)
|
26天前
|
前端开发 JavaScript
CSS id选择器
CSS id选择器
12 1
|
7天前
|
前端开发 JavaScript C++
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
12 0
|
11天前
|
前端开发
CSS 实现动态显示隐藏(:checked 和 :target 的妙用)
CSS 实现动态显示隐藏(:checked 和 :target 的妙用)
5 0