CSS選擇器優(yōu)先級(jí)和層疊規(guī)則決定了多個(gè)樣式衝突時(shí)的最終應(yīng)用效果。 1. 優(yōu)先級(jí)由選擇器類型計(jì)算得分決定，內(nèi)聯(lián)樣式>ID選擇器>類/屬性/偽類選擇器>元素/偽元素選擇器；2. 層疊涉及樣式來(lái)源優(yōu)先級(jí)，包括用戶代理樣式、用戶樣式、開發(fā)者樣式、!important聲明及內(nèi)聯(lián)樣式；3. 同優(yōu)先級(jí)下最後加載的樣式覆蓋前面；4. 使用瀏覽器開發(fā)者工具可排查樣式衝突，檢查覆蓋、!important使用、拼寫錯(cuò)誤及引入順序。掌握這些規(guī)則有助於編寫穩(wěn)定清晰的CSS代碼。

CSS選擇器的優(yōu)先級(jí)和層疊規(guī)則，是前端開發(fā)中經(jīng)常遇到但容易搞混的部分。理解清楚這些規(guī)則，能幫你避免很多樣式衝突的問題，尤其是在項(xiàng)目複雜或者多人協(xié)作時(shí)特別重要。

什麼是選擇器優(yōu)先級(jí)？

簡(jiǎn)單來(lái)說(shuō)，優(yōu)先級(jí)決定了當(dāng)多個(gè)CSS 規(guī)則作用於同一個(gè)元素時(shí)，哪一個(gè)會(huì)被最終應(yīng)用。優(yōu)先級(jí)不是簡(jiǎn)單的“後面覆蓋前面”，而是根據(jù)選擇器的類型來(lái)計(jì)算得分，得分高的規(guī)則勝出。

比如下面這個(gè)例子：

 p {
  color: red;
}

#main p {
  color: blue;
}

即使<p></p>標(biāo)籤在CSS 文件中寫在前面，只要它被#main p這個(gè)更高優(yōu)先級(jí)的選擇器選中，顏色就會(huì)變成藍(lán)色。

優(yōu)先級(jí)的計(jì)算方式是這樣的（從高到低）：

• 內(nèi)聯(lián)樣式的優(yōu)先級(jí)最高（如： style="color: red" ）
• ID 選擇器（如： #header ）
• 類選擇器、屬性選擇器、偽類（如： .btn , [type="text"] , :hover ）
• 元素選擇器、偽元素（如： div , ::before ）

可以用一個(gè)類似四位數(shù)的方式去記憶：
內(nèi)聯(lián)(1,0,0,0) > ID(0,1,0,0) > 類等(0,0,1,0) > 元素等(0,0,0,1)

層疊順序是怎麼回事？

除了優(yōu)先級(jí)之外，還有一個(gè)叫層疊（Cascading）的概念也會(huì)影響最終樣式。

層疊是指瀏覽器如何決定多個(gè)來(lái)源的樣式誰(shuí)生效，包括：

• 用戶代理樣式表（瀏覽器默認(rèn)樣式）
• 用戶自定義樣式（比如用戶設(shè)置字體大?。?/li>
• 開發(fā)者寫的樣式（你的CSS 文件）
• 重要聲明（使用!important的樣式）
• 內(nèi)聯(lián)樣式

它們之間也有優(yōu)先級(jí)關(guān)係，大致順序是：

• 正常樣式（普通寫法）
• !important樣式（慎用）
• 最後加載的同優(yōu)先級(jí)樣式會(huì)覆蓋前面的

所以如果你寫了兩個(gè)一樣的類名，而且優(yōu)先級(jí)一樣，那麼後面的那條規(guī)則會(huì)覆蓋前面的。

如何判斷哪條規(guī)則起作用？

在實(shí)際開發(fā)中，你可以通過(guò)瀏覽器的開發(fā)者工具（F12 或右鍵檢查）查看某個(gè)元素應(yīng)用了哪些樣式，以及這些樣式是從哪裡來(lái)的。

這裡有幾個(gè)小技巧可以幫你更快判斷：

• 看DevTools 中劃掉的樣式，表示被覆蓋了
• 注意是否用了!important
• 檢查是否有拼寫錯(cuò)誤或選擇器不匹配的情況
• 查看引入順序，特別是多個(gè)CSS 文件的情況下

舉個(gè)例子：如果你有一個(gè).button類，但在頁(yè)面上看到的是另一個(gè).btn類的樣式，那可能是因?yàn)閮烧邇?yōu)先級(jí)相同，而.btn在文件中寫在後面。

總結(jié)一下重點(diǎn)

總的來(lái)說(shuō)，理解CSS 的優(yōu)先級(jí)和層疊機(jī)制可以幫助你寫出更清晰、更穩(wěn)定的樣式代碼。記住幾個(gè)關(guān)鍵點(diǎn)：

• 優(yōu)先級(jí)由選擇器組成決定，ID > 類> 元素
• !important很強(qiáng)，但別濫用
• 同優(yōu)先級(jí)下，後面的樣式會(huì)覆蓋前面的
• 使用開發(fā)者工具快速排查問題

基本上就這些，雖然看起來(lái)有點(diǎn)抽象，但在調(diào)試過(guò)程中多注意這些細(xì)節(jié)，慢慢就能掌握規(guī)律了。

以上是了解CSS選擇器特異性規(guī)則和級(jí)聯(lián)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！