1. CSS權重計算規則

圖片

CSS權重計算規則是用來決定當多個CSS規則應用到同一個HTML元素上時，哪一個規則會最終生效的準則。

1.1. 權重計算規則：

• 第一優先級：!important。它會覆蓋頁面內任何位置定義的元素樣式。（ie6支持上有些bug）。
• 第一等：內聯樣式，如：style="color:red;"，權值為1000.（該方法會造成css難以管理，所以不推薦使用）
• 第二等：ID選擇器，如：#header，權值為0100.
• 第三等：類、偽類、屬性選擇器, 如：.bar， 權值為0010.
• 第四等：標簽、偽元素選擇器，如：div ::first-line 權值為0001.
• 通配符，子選擇器，相鄰選擇器等。如*，>,+, 權值為0000.
• 繼承的樣式沒有權值。

a{
    color: red;
} /*權值：0,0,0,1*/

div a{
    color: green;
} /*權值：0,0,0,2*/

.test a{
    color: black;
} /*權值：0,0,1,1*/

.test input[type="text"]{
    color: blue;
} /*權值：0,0,2,1*/

.test *[type="text"]{
    color: purple;
} /*權值：0,0,2,0*/

#test a{
    color: orange;
} /*權值：0,1,0,1*/

div#test a{
    color: red;
} /*權值：0,1,0,2*/

#test {
    color: red;
} /*權值：0,1,0,0*/

.t0.t1.t2.t3.t4.t5.t6.t7.t8.t9.t10{
    color: green;
} /*權值：0,0,11,0*/

圖片

1.2. 權重計算基于以下幾點原則：

1.2.1. 重要性聲明 (!important)：

• 使用 !important 聲明的樣式具有最高優先級，權重可視為 10000，這可以覆蓋任何其他權重的樣式，但應謹慎使用，因為它會使得樣式難以維護。

1.2.2. 內聯樣式：

• 直接在HTML元素的style屬性中定義的樣式，權重為 1000。

1.2.3. 選擇器類型：

• ID選擇器 (`#id')：權重為 0100（或簡單記為100）。
• 類選擇器 (.class)、屬性選擇器 ([attribute]) 和偽類 (:hover, :nth-child(), etc.)：權重為 0010（或簡單記為10）。
• 元素選擇器 (div, p, etc.) 和偽元素 (::before, ::after)：權重為 0001（或簡單記為1）。
• 通用選擇器 (*)、子選擇器 (>)、相鄰兄弟選擇器 (+)、以及后續兄弟選擇器 (~)：權重為 0000，但在實際計算權重時不計入，因為它們不影響權重值。

1.2.4. 計算規則：

• 計算選擇器中各類選擇器的數量，然后將它們對應的權重值相加得到總權重。
• 如果兩個選擇器的權重計算結果相同，則后出現的樣式（源順序上更靠近元素的樣式）會覆蓋之前的樣式（遵循層疊原則）。

例如，一個選擇器 .class1 #myId .class2 的權重計算如下：

• ID選擇器 #myId 貢獻 100
• 類選擇器 .class1 和 .class2 各貢獻 10，共 20
• 總權重為 100 + 20 = 120

記住，盡量避免依賴過高的權重來解決問題，而是應該利用CSS的層疊性和特異性來組織和編寫更易于維護的樣式。

更多詳細內容，請微信搜索“前端愛好者“， ? 戳我 查看 。

2. 舉例說明CSS權重計算規則

當然，讓我們通過具體的例子來說明CSS權重計算規則。

考慮以下CSS代碼片段和一個HTML元素：

CSS:

/* 規則A */
div p {
  color: blue;
}

/* 規則B */
#header .highlight {
  color: red;
}

/* 規則C (內聯樣式) */
<p style="color: green;">這段文字的顏色將會是怎樣的？</p>

HTML:

<div id="header">
  <p class="highlight">這段文字的顏色將會是怎樣的？</p>
</div>

現在，我們根據CSS權重計算規則來分析這三個規則對<p>元素顏色的影響：

1. 規則A: div p 是一個復合選擇器，包含一個元素選擇器（div）和另一個元素選擇器（p），總權重為 0001 + 0001 = 0002 或簡化表示為 2。
2. 規則B: #header .highlight 包含一個ID選擇器（#header）和一個類選擇器（.highlight），總權重為 0100 + 0010 = 110 或簡化表示為 110。
3. 規則C: 這是內聯樣式，直接在HTML元素的style屬性中定義，權重為 1000。

根據權重計算規則，內聯樣式的權重最高，其次是ID選擇器加上類選擇器的組合，最后是僅包含元素選擇器的組合。因此，對于上述HTML中的<p>元素：

• 規則C（綠色）的權重最高（1000），所以這段文字的顏色最終會是綠色。
• 即便規則B（紅色）的權重高于規則A（藍色），但由于內聯樣式的存在，規則B實際上不會生效。
• 規則A的權重最低，在沒有內聯樣式和更高權重的規則競爭時才會生效。

綜上所述，這段文字的顏色將是綠色，因為內聯樣式的權重最大。這個例子展示了權重計算在決定CSS樣式應用中的作用。