詳解CSS中的選擇器優(yōu)先級順序
我要評論特殊性是什么
在對一個HTML元素應用CSS樣式時，常常有很多種方法可以找到元素，比如：
- <div id="container" class="wrap_sty">
- <p class="pra">這是一個段落</p>
- </div>
- <style>
- #container p { color:red }
- div p { color:green }
- p { color:yellow }
- </style>
可見，如果要作用到一個HTML元素的方法有很多，遠遠不止這些。那么如果一個元素被應用了很多同樣的樣式，最終會顯式到哪一個樣式呢？CSS對于多個選擇器的優(yōu)先性使用了一個叫做特殊性的方式。
CSS特殊性
選擇器的特殊性分為4個等級，a b c d，從左到右，越左邊的越優(yōu)先, 如果一個選擇器規(guī)則有多個相同類型選擇器，則+1。
如果是HTML內(nèi)樣式，那么特殊性最優(yōu)先，a=1
id選擇器的特殊性是b，
類選擇器、偽類選擇器、屬性選擇器為c
標簽選擇器、偽元素選擇器為d
先來說說一些選擇器類型：
1.id選擇器
- #myid { ... }
2.類選擇器
- .myclass { ... }
3.標簽選擇器
- p { ... }
4.屬性選擇器
- [title="mytitle"] { ... }
由于大多數(shù)文檔例如W3CSCHOOL可能并沒有詳細說明，或許不少人認為屬性選擇器是這樣的 div[title="mytitle"] 或#id[title="mytitle"]等等，這樣是屬性選擇器，嚴格來說，這樣的并非單純的屬性選擇器，而是由id選擇器、標簽選擇器等等和屬性選擇共同組成的。
5.偽類選擇器
- p:hover { ... }
常見的偽類選擇器有：
鏈接偽類，:link， :visited，用于錨元素。
動態(tài)偽類，:hover，:focus，:active，用于任何選擇。
6.偽元素選擇器
- p::after { ... }
- p::before { ... }
偽元素和偽類是完全不同的概念，之所以稱之為偽元素，因為其確實可以生成一個虛擬的HTML元素，只不過偽元素無法被DOM獲取到。
偽元素的應用有很多，最常見的比如::after清除浮動：
- <ul>
- <li>A</li>
- <li>B</li>
- </ul>
- <style>
- li { float:left }
- ul::after { content: ""; display: block; clear: both }
- </style>
CSS特殊性示例
下面是一些CSS選擇器的特殊性示例：
| 選擇器 | 特殊性 | 以10為基數(shù)的特殊性 |
|---|---|---|
style="color: red" |
1, 0, 0, 0 | 1000 |
#id {} |
0, 1, 0, 0 | 100 |
#id #aid |
0, 2, 0, 0 | 200 |
.sty {} |
0, 0, 1, 0 | 10 |
.sty p[title=""] {} |
0, 0, 2, 0 | 20 |
p:hover {} |
0, 0, 1, 0 | 10 |
p {} |
0, 0, 0, 1 | 1 |
ul::after {} |
0, 0, 0, 1 | 1 |
div p {} |
0, 0, 0, 2 | 2 |
如果兩個規(guī)則的特殊性相同，那么后定義的會覆蓋先定義的。
CSS重要性
CSS中還有一種東西可以無視特殊性，那就是!important，使用此標記的CSS屬性總是最優(yōu)先的。
- #id { color: red }
- .class { color: yellow !important }
第二個樣式會優(yōu)先于第一個樣式，即使id選擇器的特殊性高于類選擇器。
如果兩個屬性都有 !important 那么由特殊性來決定優(yōu)先級。
- #id { color: red ！important }
- .class { color: yellow !important }
結(jié)果是第一個樣式優(yōu)先于第二個樣式。
IE6對 !important 的支持并不完全，在IE6中，如果一個選擇器中先定義了 !important 屬性，后面又定義了一個同樣的不帶 !important 的屬性，那么!important 會失效。
- div {
- color: yellow !important;
- color: red;
- }
在IE6中，可就沒辦法黃了，還是見點血吧！
IE6/7還可以在 !important 后面加點料，也不會失去味道，但是建議別這么無聊！
- div {
- color: yellow !important you are dead; /* IE6/7依然有效 */
- }
相關(guān)文章
- 這篇文章主要介紹了CSS優(yōu)先級計算的規(guī)則,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-17
- 下面小編就為大家?guī)硪黄猚ss優(yōu)先級計算方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-19
- CSS中的選擇器是分權(quán)重的,如果不加注意則很有可能會遇到樣式層疊的問題,下面我們就來詳解CSS中的選擇器優(yōu)先級及樣式層疊問題解決,需要的朋友可以參考下2016-06-14
CSS z-index 層級關(guān)系優(yōu)先級的概念
這篇文章主要介紹CSS z-index 層級關(guān)系優(yōu)先級的概念，講解的比較詳細，需要的朋友可以參考下。2016-06-06- 本文給大家分享css 優(yōu)先級的兩種理解方式，每種方式給大家介紹的非常詳細，需要的朋友參考下吧2020-02-06