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

零下一度
發布: 2017-06-24 13:47:56
原創
2288 人瀏覽過
  • code

    <style>
       .a{
      background: red;
       }
       .b{
      background: yellow;
       }
    </style>
    <div class="a b">A</div>
    登入後複製
  • 渲染效果
    css類別選擇器類別名稱覆蓋優先權實例詳解

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

  • code

    <style>
       .a{
      background: red;
       }
       .b{
      background: yellow;
       }
    </style>
    <div class="b a">A</div>
    登入後複製
  • ##渲染效果


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

    #更改元素class裡面類別名稱的順序並不會影響渲染順序
  • code
   <style>
   .b{
  background: yellow;
   }
   .a{
  background: red;
   }
   </style>
<div class="a b">A</div>
登入後複製

  • 渲染效果css類別選擇器類別名稱覆蓋優先權實例詳解

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

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

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

    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!