CSS優先級

當樣式表比較複雜時，很容易出現多個樣式對作用于一個标簽的情況，這時就需要注意

CSS

優先級來決定哪些樣式會被作用于該标簽，哪些會被覆寫。

選擇器的優先級

對于标簽自有的屬性，選擇器的優先級規則為:

内聯樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 僞類選擇器 > 标簽選擇器 = 僞元素選擇器

當如下幾個選擇器作用于同一個标簽時本例顯示的顔色為

red

，可以在浏覽器的

Elements

選中相應元素，在

Styles

檢視樣式的覆寫情況并調試。

<div id="i1" class="c1">T1</div>

<style type="text/css">
    #i1 {
        color: red;
    }
    .c1 {
        color: blue;
    }
    :nth-child(1){
        color: green;
    }
    div {
        color: grey;
    }
</style>

選擇符的優先級

選擇符是由基本選擇器組成，基本分為:

後代選擇符: #i1 .c1 .c2
子選擇符：#i1 > .c1 > .c2
相鄰選擇符：.c1 + .c2

計算選擇符中

ID

選擇器的個數

，計算選擇符中類選擇器、屬性選擇器以及僞類選擇器的個數之和

，計算選擇符中标簽選擇器和僞元素選擇器的個數之和

。按

、

的順序依次比較大小，大的則優先級高，相等則比較下一個。若最後兩個的選擇符中

都相等，則按照"就近原則"來判斷，此外，擁有

!important

的屬性具有最高的優先級。

<div id="i2" class="c2">
    <div>T2</div>
</div>
<style type="text/css">
    #i2 div {
        color: red;
    }
    .c2 > div {
        color: green;
    }
    div > div {
        color: blue;
    }
    :nth-child(1){
        color: black;
    }
    div {
        color: grey;
    }
</style>

第一個選擇符 a:1 b:0 c:1
第二個選擇符 a:0 b:1 c:1
第三個選擇符 a:0 b:0 c:2
第四個選擇符 a:0 b:1 c:0
第五個選擇符 a:0 b:0 c:1
優先級順序依次為: 1 2 4 3 5

引自 https://www.runoob.com/w3cnote/css-style-priority.html

在學習過程中，你可能發現給選擇器權重值的說法，即 ID 選擇器權值為 100，類選擇器權值為 10，标簽選擇器權值為 1，當一個選擇器由多個 ID 選擇器、類選擇器或标簽選擇器組成時，則将所有權值相加，然後再比較權值。這種說法其實是有問題的。比如一個由 11 個類選擇器組成的選擇器和一個由 1 個 ID 選擇器組成的選擇器指向同一個标簽，按理說 110 > 100，應該應用前者的樣式，然而事實是應用後者的樣式。錯誤的原因是：權重的進制是并不是十進制，CSS 權重進制在 IE6 為 256，後來擴大到了 65536，現代浏覽器則采用更大的數量。還是拿剛剛的例子說明。11 個類選擇器組成的選擇器的總權值為 110，但因為 11 個均為類選擇器，是以其實總權值最多不能超過 100，你可以了解為 99.99，是以最終應用後者樣式。

多重樣式優先級

外部樣式表和内部樣式表的優先級由其引入順序有關，一般認為内部樣式優先級大于外部樣式，也可以認為其相等，因為如果外部樣式放在内部樣式的後面引入，則外部樣式将覆寫内部樣式。

内聯樣式 > 内部樣式 > 外部樣式 > 浏覽器預設樣式

繼承樣式

一般來說對于文字樣式的設定都會具有繼承性，例如

font-family

font-size

font-weight

color

等等，當需要繼承樣式時，最近的祖先樣式比其他祖先樣式優先級高。

<div style="color: red;">
        <div style="color: blue;">
            <div >T3</div> <!-- 顯示藍色 -->
        </div>
    </div>

代碼

<!DOCTYPE html>
<html>

<head>
    <title>CSS樣式優先級</title>
</head>
<style type="text/css">
    #i1 {
        color: red;
    }
    .c1 {
        color: blue;
    }
    :nth-child(1){
        color: green;
    }
    div {
        color: grey;
    }

    #i2 div {
        color: red;
    }
    .c2 > div {
        color: green;
    }
    div > div {
        color: blue;
    }
</style>

<body>
    <div id="i1" class="c1">T1</div>
    <br>
    <div id="i2" class="c2">
        <div>T2</div>
    </div>
    <br>
    <div style="color: red;">
        <div style="color: blue;">
            <div style="color: inherit;">T3</div> <!-- 顯示藍色 -->
        </div>
    </div>
</body>

</html>

每日一題

https://github.com/WindrunnerMax/EveryDay