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

阿新 • • 發佈：2022-03-10

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	∞（無窮大）