[快速入門前端 11] CSS 選擇器 (2) 複合選擇器 — 交集和併集 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

[快速入門前端 11] CSS 選擇器 (2) 複合選擇器 — 交集和併集

前端新手村 css選擇器

Doris 2023-05-16 17:37:31 ‧ 1011 瀏覽

分享至

複合選擇器

複合選擇器是指由兩個或多個基礎選擇器組合而成的選擇器，複合選擇器的種類很多，常見的有子選擇器、併集選擇器、偽類等等，那接下來就讓我們一一介紹這些選擇器吧。

交集選擇器

故名思義，交集選擇是是由兩個以上的基礎選擇器連接在一起，並取其交集。簡單來說，交集選擇器可以理解為“且”的意思，例如 p.myClass 表示 取得類別為 myClass 的 p 標籤。
交集選擇器通常由兩個選擇器構成，可以是類別+類別、標籤+類別、id+類別(不過 id 原本就是唯一值所以較少用)，選則器之間不加空格。

若交集選擇器中含有標籤選擇器，則標籤選擇器必須寫在前面，例如 p.myClass，而非 .myClassp
交集選擇器中不可能出現兩個標籤選擇器 (因為一個元素一定只有一個標籤)，所以最常見的用法為 標籤+類別名稱

語法：

選擇器1選擇器2選擇器3....選擇器n {
    屬性名: 屬性值;
}

範例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      .btn {
        background-color: yellow; /* 樣式套用到所有含有 btn 的元素 */
        color: purple;
      }
      .btn.active { /* 只選取同時擁有 btn 和 active 這兩個 Class 的元素 */
        background-color: skyblue; /* 因為這個聲明寫在 .btn 後面，所以樣式會將前面的覆蓋掉，顯示天藍色背景 */
      }
    </style>
  </head>
  <body>
    <button class="btn">按鈕一</button>
    <button class="btn active">按鈕二</button>
    <button class="btn">按鈕三</button>
    <button class="btn">按鈕四</button>
  </body>
</html>

併集選擇器

併集選擇器可以一次選擇多個元素並賦予他們樣式，通常用於集體聲明。用法為將選擇器以逗號連接，並為其統一進行樣式設定，特別的是併集選擇器可以加入任何形式、無限多個選擇器。

語法：

選擇器1, 選擇器2, 選擇器3, 選擇器4,..... 選擇器n {
  屬性名: 屬性值;
}

範例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
        input, .btn, .active { /* 併集選擇器使符合任一選擇器的元素都變為紅色 */
            color: red;
        }
    </style>
  </head>
  <body>
    <input type="text" value="123">
    <button class="btn">按鈕一</button>
    <a class="active">按鈕二</a>
    <button class="btn">按鈕三</button>
    <button class="btn">按鈕四</button>
  </body>
</html>

上一篇：[快速入門前端 10] CSS 選擇器 (1) 基本選擇器 — 通配符、元素、類別 Class、id、屬性
下一篇：[快速入門前端 12] CSS 選擇器 (2) 複合選擇器 — 後代選擇器及兄弟選擇器
系列文章列表：[快速入門前端] 系列文章索引列表