CSS 選擇器與特性

目錄

• 選擇器權重 (Selector Specificity)
• 重置與正規化 CSS (Resetting and Normalizing)
• 瀏覽器如何判斷匹配元素
• 偽元素 (Pseudo-elements)

選擇器權重 (Selector Specificity)

• 當存在衝突的規則時，決定應用哪條 CSS 規則。
• 權重計算基於使用的選擇器類型（行內樣式、ID、類、標籤）。
• 行內樣式具有最高的特異性，然後是 ID (# - hash)，類 (.)，最後是標籤選擇器。
• 如果樣式被重複寫入，則樣式表中較低的規則離要設置樣式的元素更近。

重置與正規化 CSS (Resetting and Normalizing)

• 重置 (Resetting) - 目的是清除所有瀏覽器的默認樣式。例如，所有元素的 margin、padding、font-size 都被重置為相同的值。你需要重新聲明常見排版元素的樣式。
• 正規化 (Normalizing) - 保留有用的默認樣式，而不是"取消所有樣式"。它還修復了常見瀏覽器依賴項的錯誤。

如果我有非常自定義或非常規的網站設計，需要進行大量自定義樣式設計，且不需要保留任何默認樣式，則我會選擇重置。

瀏覽器如何判斷匹配元素

• 瀏覽器從最右側（關鍵選擇器）向左匹配選擇器，右側的部分稱為關鍵選擇器。
• 瀏覽器根據關鍵選擇器過濾 DOM 中的元素，並向上遍歷其父元素以確定匹配。
• 選擇器鏈越短越好。
• 對於選擇器 p span，瀏覽器首先會找到所有的 <span> 元素，並向上遍歷其父元素直到根節點，以查找 <p> 元素。對於某個 <span>，只要找到一個 <p>，瀏覽器就知道該 <span> 匹配選擇器，並可以停止匹配過程。

p span {
    color: ...
}

偽元素 (Pseudo-elements)

• 添加到選擇器的關鍵字，允許你設計所選元素的特定部分的樣式。
  • 用於裝飾 (:first-line, :first-letter)
  • 在不修改標記的情況下向標記添加元素（與 content: ... 結合使用）(:before, :after)

button::before {
    content: "🔔 ";
}

button::after {
    content: " ✔";
}

• 用於上面所示的 .clearfix hack，添加一個具有 clear: both 的零空間元素。