css選擇器優先順序

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

css優先順序包含四個級別（[color=red]行內樣式，id選擇符，class類選擇符，元素選擇符[/color]）以及各級別出現的次數。繼承是css的乙個主要特徵，然後繼承的權重很低，比普通元素還要低。

[b]1.行內樣式（類似css

的樣式）[/b]的優先順序為1，0，0，0，始終高於外部定義（指由或卷標定義的規則）。

[b]2.有！important宣告的規則高於一切。[/b]

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

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

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