css知多少(6) 選擇器的優先順序

2022-01-14 04:54:44 字數 1751 閱讀 7973

上一節《css知多少(5)——選擇器》最後提到,選擇器型別過多將導致一些問題,是什麼問題呢?咱們直接舉例子說明。

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

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

上圖中的該顯示成什麼顏色呢?

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

這個計算叫做「i-c-e」計算公式,

i——id;

c——class;

e——element;

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

css選擇器表示式

特指度計算結果

pp.large

p#large

div p#large

div p#large ul.list

div p#large ul.list li

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

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

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

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

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

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

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

對於下來選單,例如選擇字型、字型大小等,我當時在wangeditor的css中是用class來設定的,誰知道頁面中有乙個既有的樣式,優先順序高於我的:

導致了我配置的demo中,ul的margin-left還是45px,而我寫的css明明已經設定成了0px。原因就是這個css選擇器優先順序要高於我寫的優先順序。

當然,後來我改成了id選擇器,就改過了這個問題。

本節的內容是乙個重點,我在許多的面試題中看到過考css優先順序的問題。css優先順序並不麻煩,只要你掌握了合適的方法來學習,一晚上就入門個差不多,祝君好運。

本系列的目錄頁面:

也歡迎關注我的開源專案——wangeditor,簡潔易用的web富文字編輯器

css知多少(6) 選擇器的優先順序

上一節 css知多少 5 選擇器 最後提到,選擇器型別過多將導致一些問題,是什麼問題呢?咱們直接舉例子說明。上圖中,css中的兩個選擇器都是針對的,而且兩個設定的顏色不一樣,這裡的到底聽從誰的命令?上面還是比較簡單的,下面在來乙個複雜的 上圖中的該顯示成什麼顏色呢?要解決以上問題,我們需要引入乙個概...

選擇器優先順序 CSS選擇器優先順序總結

css選擇器優先順序這個問題,相信有點經驗前端都會認為非常簡單,但是我們今天還是來總結一下吧。相信大家應該很少直接在html頁面寫樣式吧,一般都是用link標籤匯入css樣式表。使用者自定義樣式表就是我們用link標籤引入的css樣式表,為了保持不同瀏覽器下樣式相同,所以我們的自定義樣式表一般都會覆...

CSS 選擇器優先順序

css優先順序包含四個級別 文內選擇器,id選擇器,class選擇器,元素選擇器 以及各級別出現的次數。根據這四個級別出現的次數計算得到css的優先順序。css優先順序的計算規則如下 頁面中直接設定style,加1,0,0,0 每個id選擇器 如 id 加0,1,0,0 每個class選擇器 如 c...