本文為大家分享的是CSS選擇器優(yōu)先級(jí)相關(guān)資料介紹，供大家參考，具體內(nèi)容如下

1.類的覆蓋順序和應(yīng)用的時(shí)候引用的順序沒關(guān)系，覆蓋順序取決于類定義的順序

例如：

CSS Code復(fù)制內(nèi)容到剪貼板

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

由于b晚于a定義，所以b覆蓋a，反之則a覆蓋b
 
2.類選擇器優(yōu)先級(jí)大于標(biāo)簽選擇器

例如：

CSS Code復(fù)制內(nèi)容到剪貼板

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

.div將覆蓋div

3.類選擇器優(yōu)先級(jí)等于純屬性選擇器，誰后定義誰優(yōu)先級(jí)高，例如：

CSS Code復(fù)制內(nèi)容到剪貼板

[data-name=’div’]{   
     color: red    
 }   
 .a{    
     color:blue    
 }   

.a將覆蓋[data-name=’div’]，反之[data-name=’div’]覆蓋.a

4.類選擇器優(yōu)先級(jí)小于標(biāo)簽+屬性組合選擇器，例如：

CSS Code復(fù)制內(nèi)容到剪貼板

div[data-name=’div’]{   
     color: red    
 }   
 .a{    
     color:blue    
 }   

.a將被div[data-name=’div’]覆蓋

5.類選擇器優(yōu)先級(jí)小于id選擇器，例如：

CSS Code復(fù)制內(nèi)容到剪貼板

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

.a將被#div覆蓋

6.標(biāo)簽+屬性組合選擇器優(yōu)先級(jí)小于id選擇器，例如：

CSS Code復(fù)制內(nèi)容到剪貼板

[data-name=’div’]{    
     color:blue  
 }   
 #div{    
     color: red  
}  

 #div將會(huì)覆蓋[data-name=’div’]

7.標(biāo)簽選擇器優(yōu)先級(jí)小于id選擇器，例如：

CSS Code復(fù)制內(nèi)容到剪貼板

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