CSS選擇器優先順序 走一趟再說

2022-10-09 18:27:16 字數 785 閱讀 5625

1.類的覆蓋順序和應用的時候引用的順序沒關係,覆蓋順序取決於類定義的順序

例如:.a

.b由於b晚於a定義,所以b覆蓋a,反之則a覆蓋b

2.類選擇器優先順序大於標籤選擇器;

例如:div

.div

.div將覆蓋div

3.類選擇器優先順序等於純屬性選擇器,誰後定義誰優先順序高,例如:

[data-name='div']

.a.a將覆蓋[data-name='div'],反之[data-name='div']覆蓋.a

4.類選擇器優先順序小於標籤+屬性組合選擇器,例如:

div[data-name='div']

.a.a將被div[data-name='div']覆蓋

5.類選擇器優先順序小於id選擇器,例如:

.a #div

.a將被#div覆蓋

6.標籤+屬性組合選擇器優先順序小於id選擇器,例如:

[data-name='div']

#div

#div將會覆蓋[data-name='div']

7.標籤選擇器優先順序小於id選擇器,例如:

div

#div

#div將會覆蓋div

8.標籤選擇器優先順序小於純屬性選擇器,例如:

div[data-name='div']

div將會被 [data-name='div']覆蓋

綜上所述: 標籤選擇器類選擇器=純屬性選擇器(先定義會被覆蓋)標籤+屬性組合選擇器

以上是乙個乙個試出來的,錯誤的地方還望指正。

選擇器優先順序 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...

css選擇器優先順序

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