css類別選擇器類別名稱覆蓋優先權實例詳解

• code

  <style>
     .a{
    background: red;
     }
     .b{
    background: yellow;
     }
  </style>
  <div class="a b">A</div>

• 渲染效果
  

  #最初以為更改元素中class裡面的類別名稱順序，渲染效果就會依照類別名稱順序依序渲染

• code

  <style>
     .a{
    background: red;
     }
     .b{
    background: yellow;
     }
  </style>
  <div class="b a">A</div>

• ##渲染效果

  
  

  #更改元素class裡面類別名稱的順序並不會影響渲染順序

• code

   <style>
   .b{
  background: yellow;
   }
   .a{
  background: red;
   }
   </style>
<div class="a b">A</div>

渲染效果

更改樣式表裡類別的順序渲染順序受到影響

結論：兩個類別中有相同的屬性覆蓋順序是css樣式表從下往上的順序

### #

以上是css類別選擇器類別名稱覆蓋優先權實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！