這篇文章主要介紹了CSS選擇器的權(quán)重是什么的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇CSS選擇器的權(quán)重是什么文章都會有所收獲，下面我們一起來看看吧。

成都創(chuàng)新互聯(lián)公司為您提適合企業(yè)的網(wǎng)站設(shè)計?讓您的網(wǎng)站在搜索引擎具有高度排名，讓您的網(wǎng)站具備超強的網(wǎng)絡競爭力！結(jié)合企業(yè)自身，進行網(wǎng)站設(shè)計及把握，最后結(jié)合企業(yè)文化和具體宗旨等，才能創(chuàng)作出一份性化解決方案。從網(wǎng)站策劃到成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)， 我們的網(wǎng)頁設(shè)計師為您提供的解決方案。

選擇器的權(quán)重

權(quán)重就是我同個元素，有多個選擇器的情況下，我該選擇哪一個選擇器的樣式。

    
        
        
        
            #p{
                background: red;
            }
            .p{
                background: skyblue;
            }
            p{
                background: green;
            }
            
        
    
    
        行內(nèi)的樣式

        id的樣式

        class的樣式

        
p標簽的樣式 
    

通過上面的比較，可以得出，行內(nèi)樣式>id選擇器>類選擇器>標簽選擇器>通配符

那么有沒有可能讓標簽選擇大于所有的選擇器呢，答案是有的，只要加上這行代碼!important，任何選擇器的權(quán)重就是無限大了。

    
        
        
        
            #p{
                background: red;
            }
            .p{
                background: skyblue;
            }
            p{
                background: green !important;
            }
            *{
                background: brown 
            }
        
    
    
        行內(nèi)的樣式

        id的樣式

        class的樣式

        
p標簽的樣式 
    

選擇器的類型

ID選擇器 #id

類選擇器 .class

標簽選擇器 p,div等

屬性選擇器 [type="text"]

通用選擇器 *

偽類選擇器 :hover

偽元素選擇器 ::before

子選擇器、相鄰選擇器

選擇器的權(quán)重

第一等：行內(nèi)樣式是 1000，行內(nèi)樣式雖然沒被列入選擇器里，但它的權(quán)重是最高的

第二等：id選擇器是 100

第三等：類選擇器、偽類選擇。屬性選擇器、屬性選擇器 10

第四等：標簽選擇器和偽元素選擇器 1

其他選擇器的權(quán)重為0

繼承的樣式?jīng)]有權(quán)重

如果等級相同，那么最后的樣式會覆蓋前面的樣式

最后請記住!important 的權(quán)重是無限大的

權(quán)重的計算

將選擇器的權(quán)重加起來

    
        
        
        
            body input{
                color: blue;
            }
            input{
                color: red;
            }
        
    
    
        
    

最終的樣式是文字為藍色

因為body input 的權(quán)重是2，body,input每個的權(quán)重是1，所以加起來就2

#id .input input{
    color: yellow;
}

上面的權(quán)重就是 100 + 10 +1 = 111

關(guān)于“CSS選擇器的權(quán)重是什么”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“CSS選擇器的權(quán)重是什么”知識都有一定的了解，大家如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。