css选择器的优先级

1、 类的覆盖顺序取决于类定义的顺序

.a{
     color:red; 
 }   
.b{ 
    color:green; 
 }  

由于.b晚于.a定义，所以.b覆盖.a，反之则.a覆盖.b

2、 [类选择器] 优先级大于 [标签选择器]

div{ 
    color:red;  
}   
.div{ 
    color:green; 
 }  

.div将覆盖div

3、 [类选择器] 优先级等于 [纯属性选择器]，谁后定义谁优先级高

[name='div']{   
     color: red;    
 }   
 .a{    
     color:blue;    
 }   

.a将覆盖[name=’div’]，反之[name=’div’]覆盖.a

4、[类选择器] 优先级小于 [标签+属性组合选择器]

div[name="div"]{
    color: red;
}
.a{
    color:blue;
}

.a将被div[name=’div’]覆盖

5、[类选择器] 优先级小于 [id选择器]

.a{   
     color:blue    
 }    
 #div{    
     color: red    
 }   

.a将被#div覆盖

6、[标签+属性组合选择器] 优先级小于 [id选择器]

div[name="div"]{
    color:blue;
}
#div{
    color:yellow;
}

div将会覆盖[name=’div’]

7、[标签选择器] 优先级小于 [id选择器]

div{    
     color:blue;  
 }    
 #div{   
     color: red;    
 }  

#div覆盖div

8、[标签选择器 ] 优先级小于 [纯属性选择器]

div{    
     color:blue;    
 }   
[name='div']{    
     color: red;    
 }   

div将会被 [name=’div’]覆盖

9、子级的选择器优先级比父级的选择器优先级高

但是只要能定位到p元素，那么父级选择器的权重就起作用了

综上所述：id选择器 > 标签+属性组合选择器 > 类选择器==属性选择器 > 标签选择器