CSS 3 选择器

CSS3追加的选择器

在CSS3中，追加了三个属性选择器分别为

这样使得选择器有了通配符的概念。

结构性伪类选择器

由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态失去时，它又会失去这个样式；所以叫伪类。

1. 伪类选择器

:hover ; :link ; :active ; :target ; :focus(应用于拥有键盘输入焦点的元素)
在CSS定义中

• a:active必须被置于a:hover 之后才是有效的
• a:hover必须被置于a:link和a:visited之后才是有效的

2. 伪元素选择器
   伪元素选择器的效果是需要通过添加一个实际的元素才能达到的

    
    
    


    
第一行
第二行
    

        
列表1
        
列表2
        
列表3
        
列表4
    

效果：

在CSS3中，结构性伪类选择器的共同特征是允许开发者根据文档中的结构来指定元素的样式。

:root：指将样式绑在页面的根元素中，根元素是指文档中位于最顶层的结构元素；在页面中，就是指整个页面的html部分。
:empty：指没有内容的部分
:not(XXX)：排除XXX(应用场景：想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用当前这个样式)
:target：使用target选择器，只对页面中某个target元素指定样式。该样式只在用户点击页面中的超链接，而且并跳转到target元素后才起作用。
例子：

    
    
    


    
:not
    

        
Hello?
        
Hi!
        
nice to meet u
    

    
:empty
    

        

            
some
            
any
        
        

            
where
            

        
        

            

            
two
        
    
 
    
:target
    menu·1|
    menu·2|
    menu·3|
    

        
content·1
    
    

        
content·2
    
    

        
content·3
    

效果：

关于root的小细节
如果使用了root，那body只给内容区域添加效果。

    
    
    


    

        
Hello?
        
Hi!
        
nice to meet u
    

效果：

如果没有使用root，那么body则是给整个页面添加效果

    
    
    


    

        
Hello?
        
Hi!
        
nice to meet u
    

效果：