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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值