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

2021-10-12 17:10:45 字數 1610 閱讀 2519

css選擇器優先順序這個問題，相信有點經驗前端都會認為非常簡單，但是我們今天還是來總結一下吧。

相信大家應該很少直接在html頁面寫樣式吧，一般都是用link標籤匯入css樣式表。

使用者自定義樣式表就是我們用link標籤引入的css樣式表，為了保持不同瀏覽器下樣式相同，所以我們的自定義樣式表一般都會覆蓋瀏覽器的預設樣式。市面上也出現了統一的瀏覽器樣式的css庫：reset.css和normalize.css。

所以我們可以得知：使用者樣式表的優先順序大於瀏覽器預設樣式表

什麼是行內樣式？

行內樣式就是在html元素使用style屬性寫樣式，這就稱為行內樣式，比如：

宣告
我們看到a標籤就使用了行內樣式。

li>a
只有important關鍵字的樣式宣告才能覆蓋行內樣式，但是如果行內樣式也加上了important關鍵字，那麼這個樣式的優先順序將是最高，無法在覆蓋,比如：

宣告
我們大家都知道，選擇器分三類，即id，class，標籤這三種選擇器，優先順序也是id>class>標籤。

1.首先比較id選擇器，id選擇器多的樣式勝出，比如：

#main #content/*勝出*/#content
2.id數量一致，則比較class的數量，class數量多的樣式勝出，比如：

#content .text   #content .text .span/*勝出*/
3.id和class都一致，則比較標籤的數量

#content .text div  #content .text div span/*勝出*/
我們一般會用三個數字的數值形式來進行優先順序標記，每個數字用逗號隔開。

比如：1,2,3這個數值則表示選擇器是由：1個id，2個class，3個標籤組成，第一位表示id，第二位表示class，第三位表示標籤。

例子：

#content .text div/*優先順序標記：1,1,1*/  #content .text div span/*優先順序標記：1,1,2*/

大家自然也可以想到，把三個數字看著乙個整數，數值越大，優先順序也就越高

如果在樣式表和選擇器優先順序都是平級的情況下，那麼就將會通過原始碼順序來判定，原始碼出現的較晚的樣式將會覆蓋掉前面的樣式。

我們大家在寫**查詢的時候自然都會將覆蓋樣式寫在普通樣式下面，而不是上面，這樣才能覆蓋。

div a   @media screen and (max-width: 768px)   }
如果你將**查詢的樣式放在普通樣式上方，那麼即使將螢幕寬度縮小到768px這不會覆蓋普通樣式，因為這兩個樣式是平級，優先順序是通過原始碼順序來決定。

注：!important宣告的樣式優先順序大於一切。

CSS 選擇器優先順序

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

css選擇器優先順序

css優先順序即css樣式在瀏覽器中被解析出來的先後順序。css優先順序包含四個級別 行內樣式，id選擇符，class類選擇符，元素選擇符 以及各級別出現的次數。繼承是css的乙個主要特徵，然後繼承的權重很低，比普通元素還要低。1.行內樣式 類似css 的樣式 的優先順序為1，0，0，0，始終高於外...

css選擇器優先順序

比如有這樣一段html id blakefez blakefezdiv div blakefez style 那麼這時候，上面的blakefez會顯示上面顏色呢？這裡就要考慮到css選擇器的優先順序。css選擇器的優先順序是由重要性 特殊性 疊層這三個因素決定的。重要性 什麼是重要性呢？就是看css...