選擇器的權重

時間 2019-12-19

標籤選擇器權重简体版

原文原文鏈接

選擇器的權重

權重就是我同個元素，有多個選擇器的狀況下，我該選擇哪個選擇器的樣式。css

<!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">行內的樣式</p>
        <p  class="p" id="p">id的樣式</p>
        <p  class="p">class的樣式</p>
        <p>p標籤的樣式 </p>
    </body>
</html>

經過上面的比較，能夠得出，行內樣式>id選擇器>類選擇器>標籤選擇器>通配符html

那麼有沒有可能讓標籤選擇大於全部的選擇器呢，答案是有的，只要加上這行代碼!important，任何選擇器的權重就是無限大了。code

<!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">行內的樣式</p>
        <p  class="p" id="p">id的樣式</p>
        <p  class="p">class的樣式</p>
        <p>p標籤的樣式 </p>
    </body>
</html>

選擇器的類型

ID選擇器 #idhtm

類選擇器 .class繼承

標籤選擇器 p,div等utf-8

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

通用選擇器 *it

僞類選擇器 :hoverclass

僞元素選擇器 ::beforeimport

子選擇器、相鄰選擇器

選擇器的權重

第一等：行內樣式是 1000，行內樣式雖然沒被列入選擇器裏，但它的權重是最高的

第二等：id選擇器是 100

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

第四等：標籤選擇器和僞元素選擇器 1

其餘選擇器的權重爲0

繼承的樣式沒有權重

若是等級相同，那麼最後的樣式會覆蓋前面的樣式

最後請記住!important 的權重是無限大的

權重的計算

將選擇器的權重加起來

<!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>

最終的樣式是文字爲藍色

由於body input 的權重是2，body,input每一個的權重是1，因此加起來就2