重拾css(7)——選擇器的優先級

上一節咱們知道，選擇器種類較多，同一個元素，能夠採用不一樣的選擇器方式選中，此時哪一個選擇器的樣式會被最終顯示呢？

特指度

特指度表示一個css選擇器表達式的重要程度，每一個選擇器表達式均可以經過一個公式計算出一個數值，數越大，越重要。
這個公式叫「I - C - E」計算公式：

• I —— Id; 100

• C —— Class; 10

• E —— Element; 1

即，針對一個css選擇器表達式，遇到一個id就往特指度數值中加100，遇到一個class就往特指度數值中加10，遇到一個element就往特指度數值中加1。
例如：

注意：!important優先級最高，高於上面一切。* 選擇器最低，低於一切。

此公式也可由三條規則來簡單計算：

• 規則一，包含ID的選擇器賽過包含Class的選擇器，包含Class的選擇器賽過包含元素的選擇器

• 規則二，不一樣選擇器的特指度比較時，不區分加載的順序（相同選擇器在層疊時，後加載的覆蓋前加載的），例如：

  <div id="div1" class="div1">Jerry</div>

  #div1 {color:red;}

  .div1 {color:blue;} //雖然.div1後加載，可是特指度低，因此最終仍是顯示紅色

• 規則三，設置的樣式高於繼承的樣式，不用考慮特指度，例以下圖顯示顏色爲紅色