css選擇器優先順序

2021-05-12 20:14:36 字數 1007 閱讀 2250

css優先順序即css樣式在瀏覽器中被解析出來的先後順序。

css優先順序包含四個級別(

行內樣式,id選擇符,class類選擇符,元素選擇符)以及各級別出現的次數。繼承是css的乙個主要特徵,然後繼承的權重很低,比普通元素還要低。

1.行內樣式(類似css

的樣式)的優先順序為1,0,0,0,始終高於外部定義(指由或卷標定義的規則)。

2.有!important宣告的規則高於一切。

3.如果優先權一樣,則按照在原始碼中出現的順序決定,後者居上。

測試test_css.html

1第一行

第二行自身

2第一行

第二行自身

3第一行

第二行自身

4第一行

第二行自身

5第一行

第二行自身

6第一行

第二行自身

7第一行

第二行自身

8第一行

第二行自身

第一組,僅乙個選擇器單詞的時候#id高於.class.

第二組,.body#test2比#test2多了乙個單詞,多乙個單詞就選擇得更精確,優先給就要高一些。

第三組,同樣多了乙個單詞,但其中乙個是#id選擇器,則#test3的優先順序要高於div .test3.

第四組,同樣多層級時,.class高於tag,所以.body #test4高於body #rest4.

第五組,具有同樣的優先順序,在原始碼中先寫的會被覆蓋,優先順序與層級跨越的深度無關。

第六組,不用說了,#id高於.class,也與層級深度無關,因此#body #test6高於.html #test6。

第七組,從優先順序包含的內容可知優先順序與和級別出現的次數有關,前者出現次數大於後者,因此html #body #test7高於.html .body #test7(我是這樣理解的)。

第八組,同五,同樣的優先順序,後者居上。

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

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