首頁 >web前端 >css教學 >css選擇器的優先順序是什麼?

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

青灯夜游
青灯夜游原創
2018-09-20 17:46:336719瀏覽

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn