css選擇器的優先級


1. 引言

  選擇器類型過多將導致一些問題,是什么問題呢?咱們直接舉例子說明。

  

  上圖中,css中的兩個選擇器都是針對<span>的,而且兩個設置的顏色不一樣,這里的<span>到底聽從誰的命令?

  上面還是比較簡單的,下面在來一個復雜的:

  

  上圖中的<li>該顯示成什么顏色呢?

2. 特指度

  要解決以上問題,我們需要引入一個概念——特指度(specificity)。特指度表示一個css選擇器表達式的重要程度,可以通過一個公式來計算出一個數值,數越大,越重要。

  這個計算叫做“I-C-E”計算公式,

  1. I——Id;
  2. C——Class;
  3. E——Element;

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

  下面舉幾個css表達式的特指度計算結果,大家也自己算一算,是不是對:

CSS選擇器表達式

特指度計算結果

p

1

p.large

11

P#large

101

div p#large

102

div p#large ul.list

113

div p#large ul.list li

114

  還有一個重點要注意:!important優先級最高,高於上面一切。* 選擇器最低,低於一切。

  好了,你現在可以返回文章一開始提出的兩個問題,根據特指度計算公式計算,哪個的計算結果大,瀏覽器就會以哪個為優先。

3. 簡版規則

  如果你嫌上面的計算過於復雜,有一個簡版規則。它只有三個規則,這三個規則能覆蓋大多數情況,而且比較好記。

  規則一,包含ID的選擇器勝過包含Class的選擇器,包含Class的選擇器勝過包含元素的選擇器;例如下圖,第一個特指度更高:

  

  規則二,不同選擇器的特指度比較時,不區分加載的順序(相同選擇器在層疊時,后加載的覆蓋前加載的),例如下圖,雖然后加載,但是特指度低:

  

  規則三,設置的樣式高於繼承的樣式,不用考慮特指度。例如:

      

      

  其實,大部分情況下,你通過這個簡版的規則,即可判斷選擇器的優先級。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



css選擇器的優先級 CSS選擇器優先級  CSS選擇器的優先級? CSS選擇器優先級 css選擇器的優先級 CSS選擇器優先級 CSS 選擇器與優先級 CSS的選擇器,優先級 css 選擇器之優先級 css選擇器優先級
 
粤ICP备14056181号  © 2014-2021 ITdaan.com