魯斯前端布魯斯前端

文章中英模式

布魯斯前端面試題目 - CSS選擇器優先級

深入理解CSS選擇器優先級（Specificity）計算規則、權重比較方式，掌握類型選擇器、ID選擇器、行內樣式等優先級差異，輕鬆解決樣式衝突問題。

影片縮圖

懶得看文章？那就來看影片吧

什麼是CSS選擇器優先級？

CSS選擇器優先級（Specificity）是瀏覽器決定哪些CSS規則應用於元素的機制。當多個規則針對同一元素的同一屬性設置不同值時，具有較高優先級的選擇器會覆蓋較低優先級的選擇器。

優先級從高到低的排序如下：

  1. 1.
    !important 標記

    覆蓋所有其他樣式，無視正常的優先級計算

  2. 2.
    行內樣式（Inline styles）

    直接在HTML元素上使用style屬性

  3. 3.
    ID選擇器

    使用#標識符的選擇器

  4. 4.
    類選擇器、屬性選擇器、偽類選擇器

    .class、[attr]、:hover等

  5. 5.
    元素選擇器、偽元素選擇器

    div、p、::before等

  6. 6.
    源碼順序

    若優先級完全相同，後出現的規則會覆蓋先出現的規則

優先級判斷簡單示例

/* 優先級最低 */
p {
  color: black;
}

/* 比元素選擇器優先級高 */
.text {
  color: blue;
}

/* 比類選擇器優先級高 */
#title {
  color: green;
}

/* 比ID選擇器優先級高 */
<p style="color: purple;">行內樣式</p>

/* 最高優先級，覆蓋一切 */
p {
  color: red !important;
}

同名選擇器的優先級比較

/* 當有多個相同類型的選擇器時，後出現的會覆蓋先出現的 */
.button {
  background-color: blue;
}

/* 這個會覆蓋上面的樣式，因為它在源碼中後出現 */
.button {
  background-color: green;
}

/* 但如果選擇器的優先級不同，則優先級高的會勝出 */
.nav .button {
  background-color: red;  /* 這個會生效，因為它有兩個類選擇器 */
}

.button {
  background-color: yellow;  /* 即使後出現，也不會覆蓋上面的樣式 */
}

/* 同樣適用於ID選擇器 */
#header {
  border: 1px solid gray;
}

/* 這個會覆蓋上面的邊框樣式 */
#header {
  border: 2px solid black;
}

/* 但具有更高優先級的選擇器組合會勝出 */
body #header {
  border: 3px solid red;  /* 這個會生效，因為它有元素+ID選擇器 */
}

🔥 常見面試題目

(一) 簡單判斷以下CSS規則是否會被覆蓋

/* 規則A */
.sidebar .menu-item {
  color: blue;
}

/* 規則B */
div.sidebar ul li.menu-item {
  color: red;
}

/* 規則C */
#sidebar .menu-item {
  color: green;
}

/* 規則D */
.sidebar .menu-item:hover {
  color: yellow;
}

答：

  1. 1. 規則B會覆蓋規則A，因為B有更多的選擇器（3個元素選擇器+1個類選擇器 vs 1個類選擇器）
  2. 2. 規則C會覆蓋規則A和B，因為C包含ID選擇器，優先級最高
  3. 3. 規則D不會直接覆蓋其他規則，因為它針對的是hover狀態，只在滑鼠懸停時生效
  4. 4. 當元素處於hover狀態時，規則D會覆蓋規則A，但不會覆蓋規則C（ID選擇器優先級高於偽類）

(二) 判斷以下選擇器的優先順序（從高到低）

a. p.content
b. p[class="content"]
c. #main p
d. body #main p.content
e. p.content.active

答：優先級從高到低排序：

  1. d. body #main p.content - 包含ID選擇器，優先級最高
  2. c. #main p - 也包含ID選擇器，但選擇器總數少於d
  3. e. p.content.active - 包含多個類選擇器
  4. a. p.content - 包含一個類選擇器
  5. b. p[class='content'] - 屬性選擇器與類選擇器優先級相同

記住：ID選擇器 > 類選擇器/屬性選擇器/偽類 > 元素選擇器/偽元素

(三) !important的使用時機、優點和缺點

答：

使用時機優點缺點
  • 1. 覆蓋第三方CSS庫
  • 2. 實現輔助功能
  • 3. 印刷樣式表
  • 1. 能覆蓋任何優先級
  • 2. 解決樣式衝突
  • 1. 破壞級聯特性
  • 2. 難以維護

實際例子：

/* 第三方庫的樣式 */
.btn {
  background-color: blue;
}

/* 我們的覆蓋樣式 */
.btn.primary {
  background-color: red !important; /* 確保我們的紅色按鈕不被覆蓋 */
}

/* 輔助功能樣式 */
.high-contrast-mode .btn {
  background-color: black !important;
  color: white !important;
}

最佳實踐：將!important視為最後手段，優先使用更具體的選擇器解決優先級問題。