Skip to main content

CSS選擇器與優先性介紹

CSS 元素選取器是如何運作的？​

1.1 什麼是 CSS 選取器？​

CSS 選取器是用來選擇 HTML 元素並套用樣式的工具。它的結構如下：

選取器 {
  屬性: 值;
}

  • 選取器：指定要套用樣式的 HTML 元素。

  • 屬性與值：定義樣式，例如 color: blue;。

1.2 選取器種類與運作方式​

以下是常見的 CSS 選取器類型，包含運作原理與範例：

(1) 基本選取器​

  • 元素選取器：選取特定標籤名稱的所有元素。

    <p>這是段落</p>
    p {
      color: blue;
    }

    說明：所有 <p> 標籤文字變藍色。

  • 類別選取器 (.class)：選取有特定 class 屬性的元素。

    <p class="highlight">高亮文字</p>
    .highlight {
      background-color: yellow;
    }

    說明：所有 class="highlight" 的元素有黃色背景。

  • ID 選取器 (#id)：選取單一 id 屬性的元素。

    <h1 id="main-title">主標題</h1>
    #main-title {
      font-size: 24px;
    }

    說明：只有 id="main-title" 的元素字型大小為 24px。

  • 通用選取器 (*)：選取所有元素。

    * {
      margin: 0;
    }

    說明：所有元素的外距設為 0，謹慎使用以免影響效能。

(2) 組合選取器​

  • 後代選取器 (空格)：選取某元素內的所有指定後代。

    <div class="container"><p>內部段落</p></div>
    .container p {
      color: green;
    }

    說明：.container 內的所有 <p> 文字變綠色。

  • 子選取器 (>)：選取某元素的直接子元素。

    <div><p>直接子段落</p><span><p>非直接子段落</p></span></div>
    div > p {
      font-weight: bold;
    }

    說明：只有 <div> 的直接 <p> 子元素變粗體。

  • 相鄰兄弟選取器 (+)：選取某元素後的第一個兄弟元素。

    <h1>標題</h1><p>第一段</p><p>第二段</p>
    h1 + p {
      color: red;
    }

    說明：<h1> 後的第一個 <p> 文字變紅色。

  • 一般兄弟選取器 (~)：選取某元素後的所有兄弟元素。

    h1 ~ p {
      color: purple;
    }

    說明：<h1> 後的所有<p> 文字變紫色。

(3) 屬性選取器​

  • 選取具有特定屬性或屬性值的元素。

    <input type="text" placeholder="輸入文字">
    input[type="text"] {
      border: 2px solid blue;
    }

    說明：type="text" 的 <input>有藍色邊框。

(4) 偽類選取器 (:pseudo-class)​

  • 選取元素的特定狀態。

    <a href="#">懸停我</a>
    a:hover {
      color: orange;
    }

    說明：滑鼠懸停時，<a> 文字變橙色。

(5) 偽元素選取器 (::pseudo-element)​

  • 選取元素的特定部分。

    <p>第一行文字。<br>第二行文字。</p>
    p::first-line {
      font-style: italic;
    }

    說明：段落的第一行文字變斜體。

1.3 實作練習​

HTML (index.html)：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <title>選取器練習</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <p class="text">這是段落</p>
    <button>點我</button>
  </div>
</body>
</html>

CSS (styles.css)：

.container p {
  color: green;
}
button:hover {
  background-color: lightblue;
}

步驟：

  1. 儲存檔案並在瀏覽器中測試。

  2. 修改選取器（例如把 .container p 改成 .text），觀察效果。

為何 CSS 選取器從右至左渲染？如何優化 CSS 效能？​

2.1 為何 CSS 選取器從右至左渲染？​

原因​

  • 瀏覽器運作方式：瀏覽器將 HTML 解析成 DOM 樹，然後從右至左匹配 CSS 選取器，因為這樣可以快速檢查每個 DOM 節點是否符合「關鍵選擇器」（選取器最右邊的部分）。

  • 效率考量：

    • 從右至左允許瀏覽器先檢查單一元素是否符合條件，若不符合則跳過，無需檢查父元素。

    • 從左至右需要從 DOM 根節點遍歷所有子節點，計算量大增。

  • 範例：

    <div class="container"><p>段落</p></div>
    .container p {
      color: blue;
    }

    解析過程：

    1. 先找所有 <p> 元素。

    2. 檢查每個 <p> 的父元素是否為 .container。

    3. 若符合，套用樣式；若不符合，跳過。

為什麼重要？​

  • 複雜的選取器（例如多層後代選取器）會增加匹配時間，影響渲染效能。因此，撰寫高效的選取器是優化 CSS 的關鍵。

2.2 如何優化 CSS 效能？​

以下是實用的 CSS 效能優化技巧，附上範例與操作步驟：

(1) 優化選取器​

  • 減少複雜度：用類別或 ID 選取器取代多層後代選取器。

    /* 低效 */
    div.container ul li a {
      color: blue;
    }
    /* 高效 */
    .nav-link {
      color: blue;
    }

    HTML：

    <div class="container"><ul><li><a class="nav-link">連結</a></li></ul></div>

  • 避免通用選取器 (*)：

    /* 低效 */
    * {
      margin: 0;
    }
    /* 高效 */
    body, div, p {
      margin: 0;
    }

(2) 減少樣式規則​

  • 合併重複樣式：

    /* 低效 */
    .btn1 { font-size: 16px; padding: 10px; }
    .btn2 { font-size: 16px; padding: 10px; }
    /* 高效 */
    .btn { font-size: 16px; padding: 10px; }

  • 使用縮寫屬性：

    /* 低效 */
    .box {
      margin-top: 10px;
      margin-right: 15px;
      margin-bottom: 10px;
      margin-left: 15px;
    }
    /* 高效 */
    .box {
      margin: 10px 15px;
    }

(3) 避免昂貴屬性​

  • 使用 transform 和 opacity 取代 width、height 等觸發重排的屬性。

    /* 低效 */
    .box:hover {
      width: 200px;
    }
    /* 高效 */
    .box:hover {
      transform: scale(1.2);
    }

    HTML：

    <div class="box" style="width: 100px; height: 100px; background: blue;"></div>

(4) 優化 CSS 檔案與載入​

  • 壓縮 CSS：使用工具如 CSSNano 壓縮檔案。

    /* 未壓縮 */
    .box { padding: 10px; margin: 10px; }
    /* 壓縮後 */
    .box{padding:10px;margin:10px}

  • 關鍵 CSS：將首屏樣式內聯到 <style>。

    <head>
      <style>
        .hero { font-size: 24px; color: white; }
      </style>
      <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">
    </head>

  • 減少檔案數量：合併 CSS 檔案，減少 HTTP 請求。

(5) 使用現代工具​

  • Sass：組織 CSS，減少重複。

    $primary-color: blue;
    .btn { color: $primary-color; }

  • PostCSS：自動添加前綴。

    /* 處理前 */
    .box { display: flex; }
    /* 處理後 */
    .box { display: -webkit-box; display: -ms-flexbox; display: flex; }

2.3 實作練習​

HTML (index.html)：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <title>CSS 效能練習</title>
  <style>
    .hero { font-size: 24px; color: white; background: blue; }
  </style>
  <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">
</head>
<body>
  <div class="hero">歡迎</div>
  <div class="content">
    <p class="text">內容</p>
    <button class="btn">點我</button>
  </div>
</body>
</html>

CSS (styles.css)：

.text {
  color: green;
  margin: 10px 15px;
}
.btn:hover {
  transform: scale(1.1);
}

步驟：

  1. 儲存檔案並在瀏覽器測試。

  2. 將 .text 改成 div.content p，用 Chrome 開發者工具（Performance 標籤）比較效能。

  3. 嘗試內聯更多樣式到 <style>，觀察首屏載入速度。

總結​

  • CSS 選取器運作：選取器用來選擇 HTML 元素並套用樣式，包含基本選取器（元素、類別、ID）、組合選取器（後代、子、兄弟）、屬性選取器、偽類和偽元素。透過實作練習，你可以熟悉它們的用法。

  • 右至左渲染：瀏覽器從右至左解析選取器以提高效率，快速排除不匹配的元素。

  • 優化 CSS 效能：

    • 使用具體的類別或 ID 選取器。

    • 合併樣式、使用縮寫屬性、避免昂貴屬性。

    • 壓縮檔案、內聯關鍵 CSS、減少 HTTP 請求。

    • 利用 Sass 或 PostCSS 等工具。