CSS選擇器的權(quán)重是什么

發(fā)布時(shí)間：2022-03-23 10:43:40 來(lái)源：億速云閱讀：189 作者：iii 欄目：web開發(fā)

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

選擇器的權(quán)重

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

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            #p{
                background: red;
            }
            .p{
                background: skyblue;
            }
            p{
                background: green;
            }
            
        </style>
    </head>
    <body>
        <p style="background: pink" id="p">行內(nèi)的樣式</p>
        <p  class="p" id="p">id的樣式</p>
        <p  class="p">class的樣式</p>
        <p>p標(biāo)簽的樣式 </p>
    </body>
</html>

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

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

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            #p{
                background: red;
            }
            .p{
                background: skyblue;
            }
            p{
                background: green !important;
            }
            *{
                background: brown 
            }
        </style>
    </head>
    <body>
        <p style="background: pink" id="p">行內(nèi)的樣式</p>
        <p  class="p" id="p">id的樣式</p>
        <p  class="p">class的樣式</p>
        <p>p標(biāo)簽的樣式 </p>
    </body>
</html>

選擇器的類型

ID選擇器 #id

類選擇器 .class

標(biāo)簽選擇器 p,div等

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

通用選擇器 *

偽類選擇器 :hover

偽元素選擇器 ::before

子選擇器、相鄰選擇器

選擇器的權(quán)重

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

第二等：id選擇器是 100

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

第四等：標(biāo)簽選擇器和偽元素選擇器 1

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

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

如果等級(jí)相同，那么最后的樣式會(huì)覆蓋前面的樣式

最后請(qǐng)記住!important 的權(quán)重是無(wú)限大的

權(quán)重的計(jì)算

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

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            body input{
                color: blue;
            }
            input{
                color: red;
            }
        </style>
    </head>
    <body>
        <input type="text" name="" value="ssss">
    </body>
</html>

最終的樣式是文字為藍(lán)色

因?yàn)閎ody input 的權(quán)重是2，body,input每個(gè)的權(quán)重是1，所以加起來(lái)就2

#id .input input{
    color: yellow;
}

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

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

向AI問一下細(xì)節(jié)

CSS選擇器的權(quán)重是什么

選擇器的權(quán)重

選擇器的類型

選擇器的權(quán)重

權(quán)重的計(jì)算

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽