什么是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或其他技术来保持状态。

相关文章
|
7天前
|
缓存 前端开发
CSS基础+基本选择器和复合选择器(如果想知道CSS的基础+基本选择器和复合选择器知识点,那么只看这一篇就足够了!)
CSS基础+基本选择器和复合选择器(如果想知道CSS的基础+基本选择器和复合选择器知识点,那么只看这一篇就足够了!)
|
3天前
|
移动开发 前端开发 HTML5
2024.3.30-认识 CSS (文本样式、复合选择器)
2024.3.30-认识 CSS (文本样式、复合选择器)
|
15天前
|
前端开发 JavaScript
CSS进阶-CSS选择器高级:伪类与伪元素
【6月更文挑战第13天】本文探讨了CSS伪类与伪元素的核心概念,包括伪类表示元素状态,伪元素创造抽象内容。常见问题涉及二者区别、冒号使用、顺序优先级及`content`属性。实践技巧涵盖`:not()`选择器、`:hover`与子元素伪类结合及自定义形状。通过代码示例展示了高亮悬停行、添加图标、首行样式和链接颜色的应用。理解并熟练运用伪类和伪元素可提升CSS设计效率和灵活性。
CSS进阶-CSS选择器高级:伪类与伪元素
|
7天前
|
前端开发
CSS基础之伪元素选择器(如果想知道CSS的伪元素选择器知识点,那么只看这一篇就足够了!)
CSS基础之伪元素选择器(如果想知道CSS的伪元素选择器知识点,那么只看这一篇就足够了!)
|
7天前
|
前端开发
CSS基础之伪类选择器(如果想知道CSS的伪类选择器知识点,那么只看这一篇就足够了!)
CSS基础之伪类选择器(如果想知道CSS的伪类选择器知识点,那么只看这一篇就足够了!)
|
9天前
|
前端开发 JavaScript
CSS id选择器
CSS id选择器
9 1
|
21天前
|
前端开发
CSS基础-CSS选择器:ID、Class、Tag
【6月更文挑战第7天】本文介绍了CSS中的三种基本选择器:ID、Class和Tag选择器。Tag选择器适用于统一设置同类型元素样式,但可能造成样式泛化;Class选择器灵活性高,适合复用,注意命名规范和避免过度使用;ID选择器具有最高优先级,用于唯一标识,应谨慎使用。理解其特点和场景,结合良好命名规范,能提升CSS代码效率和可维护性。
|
22天前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
22 1
|
22天前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
30 1
|
1天前
|
前端开发
CSS 选择器优先级详解及实例演示
CSS 选择器优先级详解及实例演示
5 0