1. 爱易网页
  2. CSS教程
  3. CSS3特性:CSS3 target伪类

CSS3特性:CSS3 target伪类

日期：2013-12-13　 浏览次数：21247 次

网页制造aiyiweb文章简介：CSS3 target伪类简介.

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

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

浏览器支持

由于我们在讨论CSS3，所以它如今被除了IE6-8以外的所有浏览器支持，但是IE9会支持这个伪类。这是相当遗憾的，但是这个理想并不影响你使用它。

如何使用:target

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

1
2
3
4

selector:target{
color:red;
/*other styles*/
}

实例

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

HTML结构：

1
2
3
4
5
6
7
8
9
10
11

<ul class="tabs">
	<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">


                        

                    
                    


                    

                    



    

        
相关资料更多>

    

    

        
    

            
                  
    
                      
  1. 
                        网页设计技巧:网页实用字符图标代替图片
    2. 
                   
                
                  
    
                      
  2. 
                        样式表（CSS：Cascading Style Sheets）简明教程[下]
    3. 
                   
                
                  
    
                      
  3. 
                        css为什么li最后一个不自动换行
    4. 
                   
                
                  
    
                      
  4. 
                        CSS教程：padding属性定义边内补白
    5. 
                   
                
                  
    
                      
  5. 
                        CSS3教程:边框半径和圆角
    6. 
                   
                
                  
    
                      
  6. 
                        CSS配合JavaScript做酷的静态页面效果
    7. 
                   
                
                  
    
                      
  7. 
                        技巧小结：如何让 CSS 代码繁复而易于编写？
    8. 
                   
                
                  
    
                      
  8. 
                        CSS学习笔记：id与class、padding和margin、min-height和height
    9. 
                   
                
                  
    
                      
  9. 
                        五 标题标签 headings
    10.