CSS---權重,選擇器優先順序問題

阿新 • • 發佈：2020-12-17

在寫CSS的時候我們經常會遇到選擇器優先順序的問題,比如說同一個元素的不同選擇器可能會讓元素呈現不同的效果,並且相同選擇器的樣式順序也會影響效果.為了搞清楚選擇器優先順序的問題,我們不妨動手來聯絡一下,加深印象.

Round 1

首先準備好我們的html

  <div class="d1" id="d1">
  </div>

這是它的樣式

<style>
  div {
    width: 50px;
    height: 50px;
    background-color: blue;
  }

  .d1 {
    background-color: red;
  }


</style>

結果圖:

可以看到 ---> 類選擇器的優先順序是高於標籤的優先順序的

Round 2

接下來改動下樣式,給id選擇器新增樣式

<style>
   div {
    width: 50px;
    height: 50px;
    background-color: blue;
  }

  .d1 {
    background-color: red;
  }

  #d1 {
    background-color: yellow;
  }
</style>

結果圖:

可以看到 ---> id選擇器的優先順序是高於標籤和class選擇器的優先順序的

Round 3

在加入一個id選擇器,看看會有什麼不同

<style>

  .d1 {
    background-color: red;
  }

  #d1 {
    background-color: yellow;
  }

  #d1 {
    background-color: green;
  }

</style>

結果圖:

可以看到 ---> 相同選擇器的樣式和他的順序有關,一般呈現最後一個選擇器裡的樣式

Round 4

在HTML裡寫了內聯樣式後

<div class="d1" id="d1" style="background-color: hotpink;">
  </div>

效果如下:

因此,內聯樣式的優先順序比id更高

Round 5

假如我們在div標籤的css里加 !important 呢?

<style>
  div {
    width: 50px;
    height: 50px;
    background-color: blue !important;
  }

  .d1 {
    background-color: red;
  }

  #d1 {
    background-color: yellow;
  }

  #d1 {
    background-color: green;
  }
</style>

結果是這樣子的:

你看,由於這個!important的頂級優先順序,方塊變成了藍色

Round 6

再來一個情況,比如說有這樣的html

<div class="d1" id="d1">
  div1
  <div class="d2">
    div2
  </div>
</div>

樣式如下

<style>
  /* div {
    width: 50px;
    height: 50px;
    background-color: blue !important;
  } */

  .d1 {
    font-size: 20px;
    width: 150px;
    height: 150px;
    color: red;
  }

  #d1 {
    background-color: yellow;
  }

  #d1 {
    /* background-color: green; */
  }

  .d2 {
    font-size: 10px;
    width: 50px;
    height: 50px;
  }ground-color: red;
  }

  #d1 {
    background-color: yellow;
  }

  #d1 {
    background-color: green;
  }
</style>

結果是這樣子的:

假如說，你給 div1 設定了 font-size，那麼 div2 也會繼承到相應的屬性，但是，它的優先順序比標籤還要低，自然也小於類選擇器和 id 選擇器。

Round 7

用萬用字元的優先順序情況呢? 樣式如下

<style>
 * {
        font-size: 30px;
    }
    div {
        /* background-color: blue !important; */
    }
    .d1{
        font-size: 20px;
        width: 100px;
        height: 100px;
        background-color: green;
    }
    #d1{
        background-color: red;
    }
    #d1{
        background-color: orange;
    }
    .d2{
        /* background-color: aqua; */
        width: 80px;
        height: 80px;
        /* font-size: 10px; */
    }
</style>

結果是這樣子的:

可以看到, d2的字型大小是 30px, 因此萬用字元的優先順序大於繼承

###################################################

到此為止，我們有 !important > 內聯 > id > class > 標籤 > 萬用字元 > 繼承

對於多個選擇器組合，我們要根據以下的優先順序演算法：

　　四個級別分別為：行內選擇符、ID選擇符、類別選擇符、元素選擇符。

　　優先順序的演算法：

　　每個規則對應一個初始"四位數"：0、0、0、0
　　若是行內選擇符，則加1、0、0、0
　　若是 ID選擇符，則加0、1、0、0
　　若是類選擇符/屬性選擇符/偽類選擇符，則分別加0、0、1、0
　　若是元素選擇符/偽元素選擇符，則分別加0、0、0、1
　　演算法：將每條規則中，選擇符對應的數相加後得到的”四位數“，從左到右進行比較，大的優先順序越高。注意，同一級別無論累加多少都不會進位。

舉個例子:
html

  <div class="div1 div0" id="div1">
        div1
        <div class = "div2">
            div2
        </div>
    </div>

css

div.div1{
        font-size: 20px;
        width: 100px;
        height: 100px;
        background-color: green;
    }
    .div1.div0{
        background-color: red;
    }