css選擇器的優先順序是什麼？

當我們寫頁面的時候，不知道你會不會產生這樣的問題，為什麼我給他添加的這條樣式分明已經選擇到我要給的元素了，但是他的樣式並沒有生效呢？當定義的屬性有衝突時，瀏覽器會選擇用那一套樣式呢？本章跟大家介紹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中文網其他相關文章！