當我們寫頁面的時候，不知道你會不會產生這樣的問題，為什麼我給他添加的這條樣式分明已經選擇到我要給的元素了，但是他的樣式並沒有生效呢？當定義的屬性有衝突時，瀏覽器會選擇用那一套樣式呢？本章跟大家介紹css選擇器的優先順序是什麼。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
一、選擇器的優先權排序
1. ！ important
在屬性後面寫上這條樣式，會覆寫頁面上任何位置定義的元素的樣式。
2. 行內樣式，在style屬性內寫的樣式。
3. id選擇器
4. class選擇器
5. 標籤選擇器
6. 通配符選擇器
7. 瀏覽器的自訂屬性和繼承
上面寫的這些排序的順序就是優先權/權重的大小。可以自己試試看比較一下他們的大小順序。
二、複雜選擇器優先級，後代選擇器優先順序多種情況。
有時候當我們寫樣式的時候會用到好多個後代樣式，那麼優先順序的情況是什麼情況呢。來看幾個例子。
1. id個數多的優先權高
#box .head span{
color:blue;
}
.box .head span{
color:red;
}<br data-filtered="filtered">//下面span标签的颜色是蓝色的
<div class="box" id="box">
<div class="head">
<span>我的颜色</span>
</div>
</div>2.id和class個數相等，看元素個數，個數越多優先權越高。
//颜色应用的是第一个的样式，粉色<br data-filtered="filtered">#box .head p span{
color:deeppink;
}
#box .head span{
color:blue;
}
#box .head span{
color:red;
}
<div class="box" id="box">
<div class="head">
<p class="p"><span>我的颜色</span></p>
</div>
</div>3. 優先順序相同，後面的樣式會覆蓋前面的樣式， 不分先後順序，只看選擇器類型和個數。
//蓝色，优先级相同，后面的覆盖前面的，id、class、元素的个数不分先后顺序
#box .head p span{
color:red;
}
#box div .p span{
color:blue;
}
<div class="box" id="box">
<div class="head" id="head">
<p class="p" id="p"><span>我的颜色</span></p>
</div>
</div>以上是css選擇器的優先順序是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
