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

圖片JrV28資訊網(wǎng)——每日最新資訊28at.com

CSS權(quán)重計算規(guī)則是用來決定當(dāng)多個CSS規(guī)則應(yīng)用到同一個HTML元素上時，哪一個規(guī)則會最終生效的準(zhǔn)則。JrV28資訊網(wǎng)——每日最新資訊28at.com

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

• 第一優(yōu)先級：!important。它會覆蓋頁面內(nèi)任何位置定義的元素樣式。（ie6支持上有些bug）。
• 第一等：內(nèi)聯(lián)樣式，如：style="color:red;"，權(quán)值為1000.（該方法會造成css難以管理，所以不推薦使用）
• 第二等：ID選擇器，如：#header，權(quán)值為0100.
• 第三等：類、偽類、屬性選擇器, 如：.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*/

圖片JrV28資訊網(wǎng)——每日最新資訊28at.com

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

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

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

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

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

1.2.3. 選擇器類型：

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

1.2.4. 計算規(guī)則：

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

例如，一個選擇器 .class1 #myId .class2 的權(quán)重計算如下：JrV28資訊網(wǎng)——每日最新資訊28at.com

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

記住，盡量避免依賴過高的權(quán)重來解決問題，而是應(yīng)該利用CSS的層疊性和特異性來組織和編寫更易于維護的樣式。JrV28資訊網(wǎng)——每日最新資訊28at.com

更多詳細(xì)內(nèi)容，請微信搜索“前端愛好者“， ? 戳我 查看 。JrV28資訊網(wǎng)——每日最新資訊28at.com

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

當(dāng)然，讓我們通過具體的例子來說明CSS權(quán)重計算規(guī)則。JrV28資訊網(wǎng)——每日最新資訊28at.com

考慮以下CSS代碼片段和一個HTML元素：JrV28資訊網(wǎng)——每日最新資訊28at.com

CSS:JrV28資訊網(wǎng)——每日最新資訊28at.com

/* 規(guī)則A */div p {  color: blue;}/* 規(guī)則B */#header .highlight {  color: red;}/* 規(guī)則C (內(nèi)聯(lián)樣式) */<p style="color: green;">這段文字的顏色將會是怎樣的？</p>

HTML:JrV28資訊網(wǎng)——每日最新資訊28at.com

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

現(xiàn)在，我們根據(jù)CSS權(quán)重計算規(guī)則來分析這三個規(guī)則對<p>元素顏色的影響：JrV28資訊網(wǎng)——每日最新資訊28at.com

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

根據(jù)權(quán)重計算規(guī)則，內(nèi)聯(lián)樣式的權(quán)重最高，其次是ID選擇器加上類選擇器的組合，最后是僅包含元素選擇器的組合。因此，對于上述HTML中的<p>元素：JrV28資訊網(wǎng)——每日最新資訊28at.com

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

綜上所述，這段文字的顏色將是綠色，因為內(nèi)聯(lián)樣式的權(quán)重最大。這個例子展示了權(quán)重計算在決定CSS樣式應(yīng)用中的作用。JrV28資訊網(wǎng)——每日最新資訊28at.com

JrV28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-91827-0.html淺談CSS權(quán)重計算規(guī)則，你學(xué)會了嗎？

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 從0到1，手把手教你部署自己的線上項目

下一篇： 深入理解Babel - 項目管理工具Lerna解析