1. CSS權(quán)重計(jì)算規(guī)則

圖片

CSS權(quán)重計(jì)算規(guī)則是用來(lái)決定當(dāng)多個(gè)CSS規(guī)則應(yīng)用到同一個(gè)HTML元素上時(shí)，哪一個(gè)規(guī)則會(huì)最終生效的準(zhǔn)則。

1.1. 權(quán)重計(jì)算規(guī)則：

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

a{
    color: red;
} /*權(quán)值：0,0,0,1*/

div a{
    color: green;
} /*權(quán)值：0,0,0,2*/

.test a{
    color: black;
} /*權(quán)值：0,0,1,1*/

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

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

#test a{
    color: orange;
} /*權(quán)值：0,1,0,1*/

div#test a{
    color: red;
} /*權(quán)值：0,1,0,2*/

#test {
    color: red;
} /*權(quán)值：0,1,0,0*/

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

圖片

1.2. 權(quán)重計(jì)算基于以下幾點(diǎn)原則：

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

• 使用 !important 聲明的樣式具有最高優(yōu)先級(jí)，權(quán)重可視為 10000，這可以覆蓋任何其他權(quán)重的樣式，但應(yīng)謹(jǐn)慎使用，因?yàn)樗鼤?huì)使得樣式難以維護(hù)。

1.2.2. 內(nèi)聯(lián)樣式：

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

1.2.3. 選擇器類(lèi)型：

• ID選擇器 (`#id')：權(quán)重為 0100（或簡(jiǎn)單記為100）。
• 類(lèi)選擇器 (.class)、屬性選擇器 ([attribute]) 和偽類(lèi) (:hover, :nth-child(), etc.)：權(quán)重為 0010（或簡(jiǎn)單記為10）。
• 元素選擇器 (div, p, etc.) 和偽元素 (::before, ::after)：權(quán)重為 0001（或簡(jiǎn)單記為1）。
• 通用選擇器 (*)、子選擇器 (>)、相鄰兄弟選擇器 (+)、以及后續(xù)兄弟選擇器 (~)：權(quán)重為 0000，但在實(shí)際計(jì)算權(quán)重時(shí)不計(jì)入，因?yàn)樗鼈儾挥绊憴?quán)重值。

1.2.4. 計(jì)算規(guī)則：

• 計(jì)算選擇器中各類(lèi)選擇器的數(shù)量，然后將它們對(duì)應(yīng)的權(quán)重值相加得到總權(quán)重。
• 如果兩個(gè)選擇器的權(quán)重計(jì)算結(jié)果相同，則后出現(xiàn)的樣式（源順序上更靠近元素的樣式）會(huì)覆蓋之前的樣式（遵循層疊原則）。

例如，一個(gè)選擇器 .class1 #myId .class2 的權(quán)重計(jì)算如下：

• ID選擇器 #myId 貢獻(xiàn) 100
• 類(lèi)選擇器 .class1 和 .class2 各貢獻(xiàn) 10，共 20
• 總權(quán)重為 100 + 20 = 120

記住，盡量避免依賴(lài)過(guò)高的權(quán)重來(lái)解決問(wèn)題，而是應(yīng)該利用CSS的層疊性和特異性來(lái)組織和編寫(xiě)更易于維護(hù)的樣式。

更多詳細(xì)內(nèi)容，請(qǐng)微信搜索“前端愛(ài)好者“， ? 戳我 查看 。

2. 舉例說(shuō)明CSS權(quán)重計(jì)算規(guī)則

當(dāng)然，讓我們通過(guò)具體的例子來(lái)說(shuō)明CSS權(quán)重計(jì)算規(guī)則。

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

CSS:

/* 規(guī)則A */
div p {
  color: blue;
}

/* 規(guī)則B */
#header .highlight {
  color: red;
}

/* 規(guī)則C (內(nèi)聯(lián)樣式) */
<p style="color: green;">這段文字的顏色將會(huì)是怎樣的？</p>

HTML:

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

現(xiàn)在，我們根據(jù)CSS權(quán)重計(jì)算規(guī)則來(lái)分析這三個(gè)規(guī)則對(duì)<p>元素顏色的影響：

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

根據(jù)權(quán)重計(jì)算規(guī)則，內(nèi)聯(lián)樣式的權(quán)重最高，其次是ID選擇器加上類(lèi)選擇器的組合，最后是僅包含元素選擇器的組合。因此，對(duì)于上述HTML中的<p>元素：

• 規(guī)則C（綠色）的權(quán)重最高（1000），所以這段文字的顏色最終會(huì)是綠色。
• 即便規(guī)則B（紅色）的權(quán)重高于規(guī)則A（藍(lán)色），但由于內(nèi)聯(lián)樣式的存在，規(guī)則B實(shí)際上不會(huì)生效。
• 規(guī)則A的權(quán)重最低，在沒(méi)有內(nèi)聯(lián)樣式和更高權(quán)重的規(guī)則競(jìng)爭(zhēng)時(shí)才會(huì)生效。

綜上所述，這段文字的顏色將是綠色，因?yàn)閮?nèi)聯(lián)樣式的權(quán)重最大。這個(gè)例子展示了權(quán)重計(jì)算在決定CSS樣式應(yīng)用中的作用。