前言
Q：如果多個規則匹配同一個元素，而且部分宣告之間有沖突，那么我們如何知道哪個規則勝出呢？
A：用戶代理會計算每個規則中選擇符的特指度，然后將其依附到規則中的每個宣告上，如果兩個或多個屬性宣告有沖突，特指度最高的宣告勝出，而為了計算特指度，用戶代理必須把規則“打散”成單獨的規則
例如：h1 { color: silver; background: black; } 將變成以下形式，二者的特指度都是 0,0,0,1 ，賦予每個宣告的值就是它
h1 { color: silver; }
h1 { background: black; }
3.1 特指度
特指度（或權值）：表示一個css選擇器運算式的重要程度
選擇符的特指度由選擇符本身的組成部分決定，一個特指度值由四部分構成，例如：
0,0,0,0
| 重要宣告[1] | 行內樣式 | ID選擇符 | Class[2] | Element[3] | 通用選擇符 | |
|---|---|---|---|---|---|---|
| 特指度值 | 優先級最高 | 1,0,0,0 |
0,1,0,0 |
0,0,1,0 |
0,0,0,1 |
0,0,0,0 |
重要宣告注意：
- 重要宣告要在宣告末尾的分號之前插入
!important，!important的位置必須正確，否則宣告將失效 - 帶有
!important的宣告對特指度沒有影響，但它會與不重要的宣告分開處理- 所有帶
!important的宣告會放在一起，而特指度沖突就在這個范圍內解決 - 非重要的宣告作為一個整體，其中的沖突使用特指度解決
- 當重要宣告和非重要宣告沖突時，重要宣告始終勝出
- 所有帶
特指度寫法注意：
- 特指度值是從左向右比較的，特指度
1,0,0,0比所有以0開頭的特指度大，不管后面的數字有多大 - 通用選擇符不增加特指度，它的特指度是
0,0,0,0，這與沒有特指度是不同的 - 連接符沒有特指度，即連零都沒有
3.2 繼承
繼承：是指把一個元素的某些屬性值傳給其后代的機制（某些樣式不僅應用到所指元素上，還應用到元素的后代上）
- 把宣告應用到可以繼承的元素上后，那個元素將使用宣告的樣式渲染；這個值繼續沿著樹狀圖向下傳播到后代元素，直到沒有后代為止
- 屬性值絕不向上傳播，即元素的樣式絕不傳給祖輩元素
- 在HTML中，向上傳播規則有個例外：應用到body元素上的背景樣式會傳給HTML元素，HTML時檔案的根元素，用于定義渲染檔案的畫布，這一例外僅發生在為body元素設定了背景，而沒有為html元素定義背景的情況下
注意事項：
- 很多屬性是不繼承的，這通常是為了避免得到意外的結果
- 繼承的值沒有特指度，連零都沒有
案例：因為通用選擇符應用于全部元素，而且特指度為零，所以它宣告的顏色gray擊敗繼承的顏色black（由于繼承的值沒有特指度），因此，em元素渲染為灰色，而不是黑色
* { color: gray; }
h1#page-title { color: black; }
<h1 id="page-title">
Meerkat <em>Central</em>
</h1>
<p>Welcome to the best place on the web for meerkat information!</p>
3.3 層疊
層疊：是一種樣式在檔案層次中逐層疊加的程序，目的是讓瀏覽器面對某個標簽特定屬性值的多個來源，確定最終使用哪個值
CSS層疊規則：
-
按顯示權重排序，以
!important標記的規則比沒有這一標記的權重高- 如果兩個規則應用到同一個元素上，而其中一個以
!important標記，那么有此標記的規則勝出
- 如果兩個規則應用到同一個元素上，而其中一個以
-
如果顯示權重相同，就要考慮規則的來源，宣告有三個來源：創作人員、讀者、用戶代理
- 讀者提供的樣式中以
!important標記的宣告 - 創作人員撰寫的樣式中以
!important標記的宣告 - 創作人員撰寫的常規宣告
- 讀者提供的常規宣告
- 用戶代理的默認宣告
- 讀者提供的樣式中以
-
如果各宣告的顯示權重和來源相同，那么應該按特指度排序，特指度高的宣告勝出
-
如果兩個規則的顯示權重、來源和特指度都相同，那么在樣式表中的位置靠后的規則勝出
重要宣告：!important ??
Class：類選擇符、屬性選擇符、偽類選擇符 ??
Element：元素選擇符、偽元素選擇符 ??
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/288967.html
標籤：其他
上一篇：Vue 前端權限控制的優化改進版