CSS 優先級和特指度

1、ID 選擇符 > 類選擇符 > 元素選擇符，特指度高的優先級高

2、行內樣式 > 內嵌樣式 > 鏈接樣式

3、設定的樣式 > 繼承的樣式

特指度的計算：

特指度可以用一個公式 I-C-E 來計算，其中

I 是 ID

C 是 Class

E 是 Element

對於一個 CSS 規則，若選擇符中有一個 id，則 I 的值 +1；若選擇符中有一個 class ，則 C 的值 +1；若選擇符中有一個 element，則 E 的值 +1。

最後，從 I 的值開始比較，比較的規則如下僞代碼所示：

if(a.I > b.I){
    a 的優先級高
}
else if(a.I < b.I){
    b 的優先級高
}
else{
    if(a.C > b.C){
        a 的優先級高
    }
    else if(a.C < b.C){
        b 的優先級高
    }
    else{
        if(a.E > b.E){
            a 的優先級高
        }
        else if(a.E < b.E){
            b 的優先級高
        }
        else{
            if(a 先於 b 出現){
                b 的優先級高
            }
            else{
                a 的優先級高
            }
        }
    }
}

例如：

<div id="redText">
    <p>red</p>
    <p id="greenText">green</p>
</div>

<style>
    #redText p{
        color: red;
    }
    #greenText{
        color: green;
    }
</style>

如上例子所示，雖然 greenText 的設置是在後面，但並沒有覆蓋前面的樣式，最後的結果是兩個文本都是紅色的

我們計算一下兩個樣式的特指度：

1、#redText p     這個選擇符中出現了一次 ID 和一次 Element，所以特指度是 1-0-1

2、#greenText      這個選擇符中只出現了一次 ID，所以特指度是 1-0-0

所以第一個的優先級高，不會被後者覆蓋