首页 > 代码库 > CSS3 target伪类简介，以实现tab效果为例子

CSS3 target伪类简介，以实现tab效果为例子

2024-07-22 16:40:21   217人阅读

CSS3 target伪类是众多实用的CSS3特性中的一个。它用来匹配文档(页面)的URI中某个标志符的目标元素。具体来说，URI中的标志符通常会包含一个”#”字符，然后后面带有一个标志符名称，比如#respond，target就是用来匹配ID为respond的元素的。

现在在页面中，点击一个ID链接后，页面只会跳转到相应的位置，但是并不会有比较明显的UI标识，使用:target伪类可以像:hover等伪类一样对目标元素定义样式。

浏览器支持

因为我们在讨论CSS3，所以它现在被除了IE6-8以外的所有浏览器支持，但是IE9会支持这个伪类。这是相当遗憾的，但是这个现实并不影响你使用它。最专业的UI前端框架！

如何使用:target

:target伪类和:hover、:link、:visited、:focus等伪类的用法是一样的：

.代码 
  1. selector:target{  
  2. color:red;  
  3. /*other styles*/  
  4. }  

 

实例

让我们通过一个简单的例子来演示。比如我们在页面中常常会用到tab，之前我们要用脚本来实现，YUI、jQuery也都有这样的插件或者模块，但是现在我们用:target伪类就可以实现。

HTML结构： 最专业的UI前端框架！

.代码 
  1. <ul class="tabs">  
  2.  <li><a href=http://www.mamicode.com/"#tab1">标签一</a></li>  
  3.  <li><a href=http://www.mamicode.com/"#tab2">标签二</a></li>  
  4.  <li><a href=http://www.mamicode.com/"#tab3">标签三</a></li>  
  5. </ul>  
  6. <div id="tab1" class="tab_content">  
  7. <!--tabed content--></div>  
  8. <div id="tab2" class="tab_content">  
  9. <!--tabed content--></div>  
  10. <div id="tab3" class="tab_content">  
  11. <!--tabed content--></div>  

 

CSS3代码：

.代码 
  1. /*layout styles*/  
  2. .tab_content {  
  3.  position: absolute;/*set content box as absolute*/  
  4.  /*other layout styles*/  
  5. }  
  6. #tab1:target, #tab2:target, #tab3:target {  
  7.  z-index: 1;  
  8. }  

 

原理想必大家都看懂了，就是将tab内容框设置为绝对定位，然后通过:target伪类调整其z-index。最专业的UI前端框架！

CSS3 target伪类简介，以实现tab效果为例子


联系
我们