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選擇器 > 標籤+屬性組合選擇器 > 類選擇器==屬性選擇器 > 標籤選擇器