CSS的三大特性（繼承、層疊和優先順序）

MomentYY發表於2021-12-20
CSS繼承

CSS的三大特性（繼承、層疊和優先順序）

1.css屬性的繼承

CSS中有些屬性是可繼承的，何為屬性的繼承？

  • 一個元素如果沒有設定某些屬性的值，就會跟隨（繼承）父元素的屬性值。當然，一個元素如果有設定自己的屬性值，就會使用自己的。

  • 比如color、font-size等屬性是可以繼承的，怎樣檢視某些屬性是繼承父元素的，還是自己設定的呢？（可通過瀏覽器除錯工具檢視）

    • 示例程式碼如下：給父級div設定字型樣式；

      .box {
  color: red;
  font-size: 16px;
}

      <div class="box">
  <span>我是span元素</span>
</div>

    • 瀏覽器執行結果：span元素內容字型顏色變成紅色、大小變成16px，並且標識樣式是繼承於div.box；

  • 那麼哪些樣式可以繼承哪些樣式不能繼承，具體屬性是否能繼承，可以查閱W3C官網或者MDN。

    • 以MDN為例：輸入需要查詢的屬性（color是可以繼承的、width是不能繼承的）

  • 不能繼承的屬性可以使用inherit屬性值強制繼承。

  • 注意：css屬性繼承的是計算值，並不是編寫屬性時的指定值（也就是字面值）。

    • 示例程式碼：

      .box1 {
  width: 1000px;
  height: 150px;
  background-color: #f00;
}
.box2 {
  width: 50%; /* 500px */
  height: 100px;
  background-color: #00f;
}
.box3 {
  width: inherit; /* 500px */
  height: 50px;
  background-color: #0f0;
}

      <div class="box1">
  <div class="box2">
    <div class="box3"></div>
  </div>
</div>

    • 執行結果：div.box3是直接繼承div.box2計算後的500px；

2.css屬性的層疊

CSS全稱 (Cascading Style Sheets，層疊樣式表），它允許多個相同名字的css屬性層疊在同一個元素上，層疊最後結果，只有一個css屬性會生效。

  • 瀏覽器的除錯工具非常清晰的顯示哪個css屬性最終生效。

    • 示例程式碼：

      #box { color: red; }
.container { color: green; }
div { color: blue; }

      <div id="box" class="container">div元素內容</div>

    • 瀏覽器執行結果：最終id設定的屬性生效；

  • 具體哪個css屬性生效，涉及到css屬性所處環境的優先順序的高低。

3.css屬性的優先順序

為什麼有時編寫的css屬性沒有產生對應效果，很可能是因為以下原因：

  • 選擇器的優先順序太低；
  • 選擇器沒有選中對應的元素；
  • css屬性使用不正確；
    • 元素不支援該css屬性，比如span預設不支援width和height；
    • 瀏覽器版本不相容；
    • 被同類css屬性覆蓋，比如font覆蓋font-size；

（1）解決方案：可以充分利用瀏覽器的除錯工具進行除錯和查錯，也可藉助css選擇器的權重值來解決。

（2）為了方便css屬性的優先順序，可以給css屬性所處的環境定義一個權值（權重）

  • !important：10000；
  • 內聯樣式：1000；
  • id選擇器：100；
  • 類選擇器、屬性選擇器、偽類：10；
  • 元素選擇器、偽元素：1；
  • 萬用字元：0；

（3）比較優先順序的嚴謹方法：

  • 從權值最大的開始比較每一種權值的數量多少，數量多的則優先順序高；
  • 如果數量相同，比較下一個較小的權值，以此類推；
  • 如果所有權值比較完畢後都發現數量相同，就採取“就近原則”；

（4）也可使用下面的表格來衡量優先順序高低，使用一個四位的字串表示，值從左到右，左面的最大，一級大於一級，數位之間沒有進位制，級別之間不可超越：

選擇器 選擇器權重
繼承、* 0, 0, 0, 0
元素選擇器 0, 0, 0, 1
類選擇器、偽類選擇器 0, 0, 1, 0
id選擇器 0, 1, 0, 0
內聯樣式 1, 0, 0, 0
!important ∞（無窮大）

相關文章