瀏覽器是怎樣判斷元素是否和某個CSS選擇器匹配？

王铁柱6發表於2024-11-22
瀏覽器CSS

瀏覽器判斷元素是否與某個 CSS 選擇器匹配的過程，可以概括為以下幾個步驟：

  1. CSS 解析: 瀏覽器首先會解析 CSS 規則，將選擇器字串轉換成瀏覽器可以理解的資料結構，通常是某種樹形結構（例如，選擇器列表、組合器、簡單選擇器等）。

  2. 構建特異性（Specificity）: 每個選擇器都會被賦予一個特異性值，用於確定哪個選擇器優先順序更高。特異性由四個部分組成，從高到低分別是：

    • 內聯樣式: 直接寫在 HTML 元素上的樣式，特異性最高。
    • ID 選擇器: 例如 #id
    • 類選擇器、屬性選擇器、偽類: 例如 .class、[type="text"]、:hover
    • 元素選擇器、偽元素: 例如 div、::before

  3. 從右到左匹配 (Right-to-left matching): 與普遍的誤解相反，瀏覽器匹配 CSS 選擇器是從右到左進行的。這樣做可以提高效率，避免不必要的計算。例如，對於選擇器 div p span，瀏覽器會先找到所有 span 元素，然後向上遍歷 DOM 樹，檢查其父元素是否為 p，再檢查 p 的父元素是否為 div。如果都滿足，則匹配成功。

  4. 匹配過程中的最佳化: 瀏覽器會進行各種最佳化，例如：

    • 快取: 瀏覽器會快取匹配結果，避免重複計算。
    • 索引: 瀏覽器會對 DOM 樹建立索引，例如根據標籤名、類名等建立索引，以便快速查詢元素。
    • 預過濾: 瀏覽器會根據選擇器的某些特徵進行預過濾，例如，如果選擇器包含 ID，瀏覽器會直接跳過不包含該 ID 的元素。

  5. 應用樣式: 一旦找到匹配的元素，瀏覽器就會應用相應的樣式。如果多個選擇器匹配同一個元素，則會根據特異性來決定哪個選擇器的樣式生效。如果特異性相同，則後定義的樣式會覆蓋先定義的樣式。

更詳細的解釋：

從右到左的匹配策略之所以高效，是因為它可以儘早排除不匹配的元素。例如，在選擇器 div p span 中，瀏覽器先找到所有 span 元素，如果一個 span 的父元素不是 p，那麼瀏覽器就可以立即排除這個 span，而不需要繼續向上遍歷 DOM 樹。如果從左到右匹配，瀏覽器需要先找到所有 div，然後找到每個 div 下的所有 p，最後再找到每個 p 下的所有 span，這樣會進行很多不必要的計算。

示例：

假設有以下 HTML 結構：

<div id="container">
  <p class="content">
    <span>Text 1</span>
  </p>
  <span>Text 2</span>
</div>

和以下 CSS 規則：

#container p span {
  color: red;
}

瀏覽器會先找到所有 span 元素（"Text 1" 和 "Text 2"）。然後，對於 "Text 1"，瀏覽器會檢查其父元素是否為 p，再檢查 p 的父元素是否為 #container。由於都滿足，所以 "Text 1" 會被應用紅色樣式。對於 "Text 2"，其父元素不是 p，所以不會應用紅色樣式。

總而言之，瀏覽器使用一種高效的演算法來匹配 CSS 選擇器和元素，該演算法結合了從右到左的匹配策略、特異性計算以及各種最佳化技術。理解這個過程有助於編寫更高效的 CSS 程式碼。

相關文章