css在使用選擇器對元素施加屬性的時候會有先後順序,包括特殊性和重要性等概念在內,這裡我們就來詳解css中的選擇器優先順序順序,需要的朋友可以參考下
特殊性是什麼
在對乙個html元素應用css樣式時，常常有很多種方法可以找到元素，比如：
css code複製內容到剪貼簿
"container" class="wrap_sty">
"pra">這是乙個段落
可見，如果要作用到乙個html元素的方法有很多，遠遠不止這些。那麼如果乙個元素被應用了很多同樣的樣式，最終會顯式到哪乙個樣式呢？css對於多個選擇器的優先性使用了乙個叫做特殊性的方式。
css特殊性
選擇器的特殊性分為4個等級，a b c d，從左到右，越左邊的越優先, 如果乙個選擇器規則有多個相同型別選擇器，則+1。
如果是html內樣式，那麼特殊性最優先，a=1
id選擇器的特殊性是b，
類選擇器、偽類選擇器、屬性選擇器為c
標籤選擇器、偽元素選擇器為d
先來說說一些選擇器型別：
1.id選擇器
css code複製內容到剪貼簿
#myid
2.類選擇器
css code複製內容到剪貼簿
.myclass
3.標籤選擇器
css code複製內容到剪貼簿
p
4.屬性選擇器
css code複製內容到剪貼簿
[title="mytitle"]
由於大多數文件例如w3cschool可能並沒有詳細說明，或許不少人認為屬性選擇器是這樣的 div[title="mytitle"] 或#id[title="mytitle"]等等，這樣是屬性選擇器，嚴格來說，這樣的並非單純的屬性選擇器，而是由id選擇器、標籤選擇器等等和屬性選擇共同組成的。
5.偽類選擇器
css code複製內容到剪貼簿
p:hover
常見的偽類選擇器有：
鏈結偽類，:link， :visited，用於錨元素。
動態偽類，:hover，:focus，:active，用於任何選擇。
6.偽元素選擇器
css code複製內容到剪貼簿
p::after
p::before
偽元素和偽類是完全不同的概念，之所以稱之為偽元素，因為其確實可以生成乙個虛擬的html元素，只不過偽元素無法被dom獲取到。
偽元素的應用有很多，最常見的比如::after清除浮動：
css code複製內容到剪貼簿
css特殊性示例
下面是一些css選擇器的特殊性示例：
選擇器特殊性
以10為基數的特殊性
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
20p:hover {}
0, 0, 1, 0
10p {}
0, 0, 0, 1
1ul::after {}
0, 0, 0, 1
1div p {}
0, 0, 0, 2
2如果兩個規則的特殊性相同，那麼後定義的會覆蓋先定義的。
css重要性
css中還有一種東西可以無視特殊性，那就是!important，使用此標記的css屬性總是最優先的。
css code複製內容到剪貼簿
#id
.class
第二個樣式會優先於第乙個樣式，即使id選擇器的特殊性高於類選擇器。
如果兩個屬性都有 !important 那麼由特殊性來決定優先順序。
css code複製內容到剪貼簿
#id
.class
結果是第乙個樣式優先於第二個樣式。
ie6對 !important 的支援並不完全，在ie6中，如果乙個選擇器中先定義了 !important 屬性，後面又定義了乙個同樣的不帶 !important 的屬性，那麼!important 會失效。
css code複製內容到剪貼簿
div
在ie6中，可就沒辦法黃了，還是見點血吧！
ie6/7還可以在 !important 後面加點料，也不會失去味道，但是建議別這麼無聊！
css code複製內容到剪貼簿
div
CSS選擇器優先順序詳解
開發者在使用css進行網頁開發時需要使用選擇器來指定樣式要應用的元素，在開發時主要有以下幾種選擇器。foo bar p 除了用css給元素加樣式，在html中也可以給元素加上行內樣式，例如 style color red i m redp 這行 在網頁中會渲染出紅色的文字。當計算優先順序時，我們可以...
選擇器優先順序 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...