CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue}

浏览器支持:

不支持IE8及以下的IE版本,IE9支持这个属性,其它非IE内核浏览器如:Firefox、Chrome、等这些浏览器都支持。

用法:

:target伪类与:hover、:link、:visited、:focus等伪类的用法一样

:target {color:blue}

实例:CSS3 :target伪类实现Tab切换效果

下面简单介绍下如何用csse :target来制作一个无JavaScript的tab切换效果

HTML代码:

<div class="tablist"> 
<ul class="tabmenu">
 <li><a href="#tab1">标签一</a></li>
  <li><a href="#tab2">标签二</a></li>
   <li><a href="#tab3">标签三</a></li> 
   </ul> 
   <div id="tab1" class="tab_content">tab1 content</div> 
   <div id="tab2" class="tab_content">tab2 content</div> 
   <div id="tab3" class="tab_content">tab3 content</div> 
   </div>

CSS代码:

.tab_content {
position: absolute;
}
#tab1:target, #tab2:target, #tab3:target {
z-index: 1;
}

原理其实很简单,就是把tab元素设为绝对对定位absolute,再通过:target伪类改变它们的层级(z-index)。

转载请注明出处:济南网站建设!http://hongsehuoxian.com
看到这里如果这篇文章真的帮到你了,不妨打赏一下哦!

以上就是红色火线JAVA加油站整理的关于实用CSS3属性之 :target伪类实现Tab切换效果的文章,
希望可以帮到你,如果你有不同的见解可以留言指正哦,避免让别的java小伙伴在走挫折路。
web前端如何使用百度地图
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信