摘要 今天小編跟大家講解下有關(guān)詳解CSS中的選擇器優(yōu)先級順序css樣式使用優(yōu)先級順序，相信小伙伴們對這個(gè)話題應(yīng)該有所關(guān)注吧，小編也收集到了有關(guān)詳解CSS中的選擇器優(yōu)
今天小編跟大家講解下有關(guān)詳解CSS中的選擇器優(yōu)先級順序 ，相信小伙伴們對這個(gè)話題應(yīng)該有所關(guān)注吧css樣式使用優(yōu)先級順序，小編也收集到了有關(guān)詳解CSS中的選擇器優(yōu)先級順序 的相關(guān)資料，希望小伙伴們看了有所幫助。
特殊性是什么在對一個(gè)HTML元素應(yīng)用CSS樣式時(shí) 常常有很多種方法可以找到元素 比如：
CSS Code復(fù)制內(nèi)容到剪貼板
這是一個(gè)段落
可見 如果要作用到一個(gè)HTML元素的方法有很多 遠(yuǎn)遠(yuǎn)不止這些。那么如果一個(gè)元素被應(yīng)用了很多同樣的樣式 最終會顯式到哪一個(gè)樣式呢 CSS對于多個(gè)選擇器的優(yōu)先性使用了一個(gè)叫做特殊性的方式。
CSS特殊性選擇器的特殊性分為4個(gè)等級 a b c d 從左到右 越左邊的越優(yōu)先, 如果一個(gè)選擇器規(guī)則有多個(gè)相同類型選擇器 則+1。如果是HTML內(nèi)樣式 那么特殊性最優(yōu)先 a=1id選擇器的特殊性是b 類選擇器、偽類選擇器、屬性選擇器為c標(biāo)簽選擇器、偽元素選擇器為d先來說說一些選擇器類型：1.id選擇器
CSS Code復(fù)制內(nèi)容到剪貼板 #myid{...}
2.類選擇器
CSS Code復(fù)制內(nèi)容到剪貼板 .{...}
3.標(biāo)簽選擇器
CSS Code復(fù)制內(nèi)容到剪貼板 p{...}
4.屬性選擇器
CSS Code復(fù)制內(nèi)容到剪貼板 [title="\"]{...}
由于大多數(shù)文檔例如可能并沒有詳細(xì)說明 或許不少人認(rèn)為屬性選擇器是這樣的 div[title="\"] 或#id[title=""]等等 這樣是屬性選擇器 嚴(yán)格來說 這樣的并非單純的屬性選擇器 而是由id選擇器、標(biāo)簽選擇器等等和屬性選擇共同組成的。5.偽類選擇器
CSS Code復(fù)制內(nèi)容到剪貼板 p:hover{...}
常見的偽類選擇器有：鏈接偽類 :link : 用于錨元素。動態(tài)偽類 :hover :focus : 用于任何選擇。6.偽元素選擇器
CSS Code復(fù)制內(nèi)容到剪貼板 p::after{...} p::{...}
偽元素和偽類是完全不同的概念 之所以稱之為偽元素 因?yàn)槠浯_實(shí)可以生成一個(gè)虛擬的HTML元素 只不過偽元素?zé)o法被DOM獲取到。偽元素的應(yīng)用有很多 最常見的比如::after清除浮動：
CSS Code復(fù)制內(nèi)容到剪貼板
CSS特殊性示例下面是一些CSS選擇器的特殊性示例： 選擇器 特殊性 以10為基數(shù)的特殊性 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 如果兩個(gè)規(guī)則的特殊性相同 那么后定義的會覆蓋先定義的。
CSS Code復(fù)制內(nèi)容到剪貼板 #id{color:red} .class{color:!}
第二個(gè)樣式會優(yōu)先于第一個(gè)樣式 即使id選擇器的特殊性高于類選擇器。如果兩個(gè)屬性都有 ! 那么由特殊性來決定優(yōu)先級。
CSS Code復(fù)制內(nèi)容到剪貼板 #id{color:red！} .class{color:!}
結(jié)果是第一個(gè)樣式優(yōu)先于第二個(gè)樣式。IE6對 ! 的支持并不完全 在IE6中 如果一個(gè)選擇器中先定義了 ! 屬性 后面又定義了一個(gè)同樣的不帶 ! 的屬性 那么! 會失效。
CSS Code復(fù)制內(nèi)容到剪貼板 div{ color:!; color:red; }
在IE6中 可就沒辦法黃了 還是見點(diǎn)血吧！IE6/7還可以在 ! 后面加點(diǎn)料 也不會失去味道 但是建議別這么無聊！
CSS Code復(fù)制內(nèi)容到剪貼板 div{ color:!; }
