一、属性选择器

    
                
    
      this is red
    
    
    
     this is blue
    
    
    
     this is yellow
    
    
    
     this is green
    
    
    
     this is grey
    
    
    
     this is violet
    
    
    
     this is orange
    

 

二、结构伪类选择器

    1. E:root

        选择匹配E所在文档的根元素，在HTML中，根元素就是html

    2. E:nth-child(n)   

    选择其父亲元素中第n个孩子位置的元素，然后判断匹不匹配E，匹配选择，否则不选中

    
                
    
        
     1        
     red        
     1    
    
    
    
        
     
      1
     
        
     1        
     red        
     1    
    

    3. E:nth-last-child(n)

        原理同上一个，只不过n是倒着数的。

    4. E:nth-of-type(n)

        选择在其父元素第n个匹配E的子元素，如存在选中，不存在则不执行

    
                
    
        
     
      1
     
        
     1        
     red        
     1    
    
    
    
        
     
      1
     
        
     1        
     1        
     not red    
    

    5. E:nth-last-of-type(n)

        原理同上，n是倒着数

    6. E:last-child

        选择E的父亲元素的最后一个孩子元素，如果匹配E，则选中，否则不执行

    7: E:first-of-type

        选择在其父亲元素中匹配E的第一个同类型的子元素，同E:nth-of-type(1)

    8 E:last-of-type

        选择在其父亲元素中匹配E的最后一个同类型的子元素，同E:nth-last-of-type(1)，注意其同E:last-child的区别。

    9 E:only-child

        选择其父亲元素只包含一个子元素，且匹配E的子元素，否则不执行选择。

    10 E:only-of-type

        选择其父元素自包含唯一一个匹配E的子元素(可以有多个孩子元素，但只有一个能匹配E，否则不执行选择)

    11 E:empty

        匹配E,且该元素不包含子节点，标签内的文本也属于子节点。

 

三、UI伪类选择器

UI伪类选择器只有当选中元素处于某种状态下时才起作用，想必大家从字面就能看出来，就不过多解释了。

1. E:hover
2. E:active
3. E:focus
4. E:enabled
5. E:disabled
6. E:read-only
7. E:read-write
8. E:checked
9. E:default
10. E:indeterminate
11. E:selection

 

四、其他选择器 

    1. E~F(兄弟选择器)

        选中所有匹配F且位于E元素的后面的元素(E和F应该是兄弟关系)

        div~p 只匹配<p>3<p>

    
    
     
1
    
    
    
     
2
    
3

  2. E>F(子选择器)

如果.class1>.class2>.class3改为.class1>.class3是无法使字体变色，> 只能选取子节点，而不是后代节点。

    
            
    
    
     
        
      
       red
      
    
     
    

 

  3 E:not(G)

        匹配E且不匹配G，G是一个简单过滤器，不能够使用复合过滤器。

   4 E:target

        目标伪类选择器。选择匹配E的所有元素，且匹配元素被相关URL指向，该选择器是动态选择器，只有当URL指向该元素时，样式才能够有效。

    
                
    
     haha
    
    
    
     hsdf
    

结果如下，注意URL和变色情况