CSS 選擇器的權(quán)重（特異性）是確定在多個(gè)選擇器應(yīng)用于同一元素時(shí)，哪個(gè)選擇器的樣式會(huì)最終生效的關(guān)鍵因素。然而，關(guān)于 CSS 選擇器特異性的理解，常常存在一些常見的誤解。本文將探討這些誤解，并幫助大家理解 CSS 選擇器的權(quán)重。

誤解一：權(quán)重是一個(gè)數(shù)字

CSS 選擇器的權(quán)重并不是一些數(shù)字。所以，計(jì)算元素的權(quán)重時(shí)，并不是簡(jiǎn)單的將權(quán)重?cái)?shù)值相加就可以了。

CSS 選擇器的權(quán)重由三個(gè)部分組成，表示為 (a, b, c)，其中 a、b、c 分別代表了不同選擇器類型的權(quán)重。具體規(guī)則如下：

• ID選擇器：權(quán)重值為（1, 0, 0），通過元素的ID選擇器來匹配的樣式。
• 類選擇器、屬性選擇器和偽類選擇器：權(quán)重值為（0, 1, 0），類選擇器（如.example）、屬性選擇器（如[type="text"]）和偽類選擇器（如:hover）具有相同的權(quán)重。
• 元素選擇器和偽元素選擇器：權(quán)重值為（0, 0, 1），元素選擇器（如p）和偽元素選擇器（如::before）具有相同的權(quán)重。

注意：通配符選擇器（如 *）、子選擇器（如 >）、相鄰兄弟選擇器（如 +）和兄弟選擇器（如 ~）對(duì)權(quán)重沒有貢獻(xiàn)，即它們的權(quán)重為 (0,0,0)。

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

1. 從左到右進(jìn)行比較：首先比較最高位（內(nèi)聯(lián)樣式），如果相同，則比較下一位，依此類推。例如（1, 0, 0）的優(yōu)先級(jí)高于（0, 1, 0），而（0, 1, 0）的優(yōu)先級(jí)高于（0, 0, 1）。
2. 權(quán)重相加：每個(gè)組成部分的權(quán)重是獨(dú)立計(jì)算的，并且不會(huì)累加。比如，一個(gè)選擇器中有兩個(gè)類選擇器（.class1.class2）并不會(huì)使其權(quán)重變?yōu)椋?,2,0），而是仍然保持為（0,1,0）。同樣，一個(gè)選擇器中有一個(gè)ID選擇器和一個(gè)類選擇器（#id.class）的權(quán)重是（1,1,0），而不是（2,0,0）。
3. !important 規(guī)則：如果在聲明中使用了 !important，它會(huì)覆蓋其他所有的特異性。但需要注意的是，!important 只在同一來源的樣式中有效。如果來自用戶代理樣式表（瀏覽器默認(rèn)樣式）或用戶樣式表的 !important 規(guī)則與來自作者樣式表的普通規(guī)則沖突，那么用戶代理樣式表或用戶樣式表的 !important 規(guī)則會(huì)生效。
4. 來源順序：如果兩個(gè)規(guī)則的特異性相同，并且都沒有使用 !important，那么后出現(xiàn)的規(guī)則會(huì)覆蓋先出現(xiàn)的規(guī)則（即“后來者居上”的原則）。

例如：

/* 權(quán)重為 (0,0,1) */  
div { color: red; }  

/* 權(quán)重為 (0,1,0) */  
.class1 { color: green; }  

/* 權(quán)重為（1,0,0） */  
#id1 { color: blue; }  

/* 權(quán)重為（1,1,0）（因?yàn)?ID 選擇器的權(quán)重高于類選擇器）*/  
#id1.class1 { color: purple; }  

/* 權(quán)重為（0,1,0），因?yàn)橹挥幸粋€(gè)類選擇器 */  
.class1 { color: red; }  
  
/* 權(quán)重為（0,1,0），即使有兩個(gè)類選擇器，但它們的權(quán)重不會(huì)相加 */  
.class1.class2 { color: blue; }  
  
/* 權(quán)重為（1,1,0），因?yàn)橐粋€(gè)ID選擇器和一個(gè)類選擇器的組合 */  
#id1.class1 { color: green; }  
  
/* 權(quán)重為（0,1,0），因?yàn)橛腥齻€(gè)類選擇器，但每個(gè)類選擇器的權(quán)重仍然是（0,1,0） */  
.class1.class2.class3 { color: purple; }

在上面的例子中，即使選擇器中包含多個(gè)相同的組成部分（如類選擇器），每個(gè)組成部分的權(quán)重仍然是獨(dú)立的，并且不會(huì)累加。因此，在選擇器沖突時(shí)，特異性更高的選擇器將覆蓋特異性較低的選擇器。如果特異性相同，則后出現(xiàn)的規(guī)則會(huì)覆蓋先出現(xiàn)的規(guī)則（即“后來者居上”的原則）。

詳細(xì)來看看最后一個(gè)例子：

對(duì)于選擇器 .class1.class2.class3，其特異性（權(quán)重）的計(jì)算方式如下：

• 該選擇器包含三個(gè)類選擇器（.class1、.class2 和 .class3）。
• 在CSS特異性計(jì)算中，每個(gè)類選擇器都貢獻(xiàn)（0,1,0）的特異性值。
• 由于特異性值不會(huì)跨類型累加，我們只需關(guān)注類選擇器這一位（即第三位）上的數(shù)量。
• 在這個(gè)例子中，有三個(gè)類選擇器，但每個(gè)類選擇器在類選擇器這一位上的值仍然是 1。

但是，這并不意味著三個(gè)類選擇器加起來就是 3。實(shí)際上，在選擇器的特異性計(jì)算中，我們不會(huì)將類選擇器這一位上的值相加。我們只需記錄存在多少個(gè)類選擇器（在這個(gè)例子中是三個(gè)）。然而，在描述特異性時(shí)，我們通常（0,3,0）不直接寫出這樣的表示法，因?yàn)榘凑諛?biāo)準(zhǔn)的特異性表示法，我們只需指出在類選擇器這一位上有三個(gè)單位（即 0,1,0 出現(xiàn)了三次）。

但是，為了明確和避免混淆，當(dāng)我們談?wù)撨@種由多個(gè)同類選擇器組成的選擇器的特異性時(shí)，我們可能會(huì)說它在類選擇器這一位上的特異性“權(quán)重”相當(dāng)于（0,3,0）（盡管這不是標(biāo)準(zhǔn)的表示法）。不過，在比較選擇器的特異性時(shí)，我們只需記住它在類選擇器這一位上有三個(gè)單位。

因此，.class1.class2.class3 的特異性（權(quán)重）按照標(biāo)準(zhǔn)的表示法是 (0,1,0)（但因?yàn)橛腥齻€(gè)類選擇器，所以在類選擇器這一位上的“等效權(quán)重”可以理解為三個(gè)單位）。

誤解二：使用style屬性會(huì)增加權(quán)重

很多人認(rèn)為，在 HTML 元素上直接使用style屬性來定義 CSS 樣式會(huì)增加樣式權(quán)重。

在 HTML 元素上直接使用style屬性并不會(huì)增加元素的特異性。實(shí)際上，style 屬性定義的樣式具有最高的優(yōu)先級(jí)，這通常被稱為“內(nèi)聯(lián)樣式”或“行內(nèi)樣式”。但這種高優(yōu)先級(jí)并非來源于特異性的計(jì)算，而是源于CSS層疊和沖突解決機(jī)制中的一個(gè)特殊規(guī)則。

CSS層疊的優(yōu)先級(jí)規(guī)則中，style屬性（內(nèi)聯(lián)樣式）的優(yōu)先級(jí)高于其他任何在樣式表中定義的樣式規(guī)則，無論這些樣式規(guī)則使用了何種選擇器（ID、類、元素等）。但請(qǐng)注意，這種優(yōu)先級(jí)與特異性是兩個(gè)不同的概念。

• 特異性：用來確定哪些樣式規(guī)則會(huì)應(yīng)用到元素上的機(jī)制。特異性是一個(gè)由三個(gè)部分組成的權(quán)重值當(dāng)兩個(gè)或更多的樣式規(guī)則都適用于同一個(gè)元素時(shí)，瀏覽器會(huì)根據(jù)這些規(guī)則的特異性來決定哪個(gè)規(guī)則會(huì)最終應(yīng)用到該元素上。
• 優(yōu)先級(jí)：在特異性相同的情況下，用來確定哪個(gè)樣式規(guī)則會(huì)生效的機(jī)制。這時(shí)，會(huì)按照以下順序來確定優(yōu)先級(jí)，在優(yōu)先級(jí)上，用戶樣式會(huì)覆蓋用戶代理樣式，而作者樣式會(huì)覆蓋用戶樣式（除非用戶樣式使用了!important）：

內(nèi)聯(lián)樣式

作者的樣式表

重要的作者樣式

普通的作者樣式

用戶代理樣式（User Agent Stylesheet）：瀏覽器的默認(rèn)樣式，如默認(rèn)字體大小、顏色等。

用戶樣式（User Styles）：通過瀏覽器設(shè)置或擴(kuò)展自定義的樣式。

作者樣式（Author Styles）：在樣式表中定義的樣式。

在作者定義的樣式中，內(nèi)聯(lián)樣式具有最高的優(yōu)先級(jí)，即使其他樣式規(guī)則具有更高的特異性。但請(qǐng)注意，這并不意味著內(nèi)聯(lián)樣式具有更高的特異性；它只是在優(yōu)先級(jí)上高于其他樣式。因此，style屬性并不會(huì)增加元素的權(quán)重。

誤解三：使用!important會(huì)增加權(quán)重

我們知道，在 CSS 中使用 !important 會(huì)使得樣式的優(yōu)先級(jí)最高。不過，在 CSS 聲明中使用 !important 并不會(huì)增加其特異性。

特異性（權(quán)重）是一個(gè)由選擇器類型決定的權(quán)重系統(tǒng)，用于確定在多個(gè)樣式規(guī)則應(yīng)用于同一元素時(shí)，哪個(gè)規(guī)則會(huì)被優(yōu)先應(yīng)用。而!important則是一個(gè)覆蓋機(jī)制，用于改變聲明的優(yōu)先級(jí)，使其在CSS的層疊順序中具有更高的權(quán)重。

當(dāng)瀏覽器需要確定一個(gè)元素的最終樣式時(shí)，它會(huì)按照以下步驟進(jìn)行：

1. 計(jì)算特異性：首先，瀏覽器會(huì)計(jì)算每個(gè)應(yīng)用于該元素的 CSS 規(guī)則的特異性。特異性越高的規(guī)則，其優(yōu)先級(jí)越高。
2. 比較來源：如果兩個(gè)或多個(gè)規(guī)則具有相同的特異性，瀏覽器會(huì)進(jìn)一步比較這些規(guī)則的來源。通常，用戶定義的樣式（如瀏覽器擴(kuò)展或用戶樣式表）會(huì)覆蓋作者定義的樣式（即網(wǎng)頁開發(fā)者的樣式表），而作者定義的樣式會(huì)覆蓋用戶代理樣式（即瀏覽器的默認(rèn)樣式）。
3. 考慮!important：如果兩個(gè)或多個(gè)規(guī)則具有相同的特異性和來源，并且其中至少有一個(gè)使用了!important，則使用了!important的規(guī)則會(huì)覆蓋沒有使用!important的規(guī)則。
4. 比較順序：如果兩個(gè)或多個(gè)規(guī)則具有相同的特異性、來源，并且都沒有使用!important，或者都使用了!important，則最后定義的規(guī)則會(huì)覆蓋先前定義的規(guī)則。

因此，!important并不改變特異性，而是在特異性比較之后，作為一個(gè)額外的優(yōu)先級(jí)判斷依據(jù)。使用!important應(yīng)該謹(jǐn)慎，因?yàn)樗鼤?huì)破壞CSS的層疊和特異性規(guī)則，使得樣式更難于維護(hù)和調(diào)試。在可能的情況下，最好通過優(yōu)化選擇器和組織樣式規(guī)則來避免使用!important。