群組選擇器、組合選擇器

CSS 提供了非常多樣的選擇器，這些選擇器不僅可以單獨使用，也可以組成群組的形式，或將不同的選擇器組合串連成新的選擇器，這篇教學會介紹群組選擇器和組合選擇器的用法。

快速導覽：

群組選擇器

使用 :is() 簡化群組選擇器

組合選擇器

權重加總的影響

CSS 教學 - 群組選擇器、組合選擇器

群組選擇器

「群組選擇器」顧名思義，就是將多個不同的選擇器使用逗號「,」組成「群組」，只要是群組裡的選擇器，就可以套用「相同的樣式」，例如下方的 h2、p、li[note] 和 span 都會套用紅色文字樣式。

線上展示：https://codepen.io/oxxo/pen/LYoZvKX

<!-- HTML 程式碼 -->
<h2>oxxo.studio</h2>
<p>Hello World!!</p>
<ul>
  <li>apple</li>
  <li note>banana</li>
  <li>orange</li>
</ul>
<span>Good Morning...</span>

<!-- CSS 程式碼 -->
<style>
  h2, p , li[note], span {color: red;}
</style>

CSS 教學 - 群組選擇器、組合選擇器 - 逗號組合群組

如果使用「文件結構」選擇器組成群組，因為文件結構選擇器有時「撰寫長度較長」，也可以搭配「逗號 + 換行」的做法，讓程式碼更加容易閱讀，下方的 CSS 呈現四個結構選擇器所組成的群組。

<!-- HTML 程式碼 -->
<h2><span>oxxo</span>.studio</h2>
<ul>
  <li class="good">apple ( <em>YES</em> )</li>
  <li>banana</li>
  <li>papaya</li>
</ul>
<h3 id="title"><span>Hello world</span></h3>
<div>
  <p class="note">
    <span>good morning</span>
  </p>
</div>

<!-- CSS 程式碼 -->
<style>
  h2 span,
  ul li .good em,
  #title span,
  div .note > span {
    color: red;
  }
</style>

CSS 教學 - 群組選擇器、組合選擇器 - 群組套用樣式

使用 :is() 簡化群組選擇器

:is() 是「虛擬類別選擇器」的一種，如果群組裡包含了「相同的子元素」，就可以透過 :is() 來簡化群組的則器，舉例來說，有好幾個父元素都包含同樣 span 子元素，就能利用 :is() 簡化 ( 注意 IE 不支援 :is())。

線上展示：https://codepen.io/oxxo/pen/zYQBQxj

<h2><span>oxxo</span>.studio</h2>
<p>Hello <span>World</span>!!</p>
<ul>
  <li>apple</li>
  <li><span>banana</span></li>
  <li>orange</li>
</ul>
<div><span>Good</span> Morning...</div>

<!-- CSS 程式碼 -->
<style>
/* 原本群組寫法 */
/*
h2 span,
p span,
li span,
div span {
  color: red;
}
*/

/* 使用 :is() */
*:is(h2, p, li, div) span {
  color: red;
}
</style>

CSS 教學 - 群組選擇器、組合選擇器 - 群組選擇器搭配 :is()

組合選擇器

「組合選擇器」表示「將多個選擇器組合成一個新的選擇器」，換句話說就是種「選擇器交集」的概念，只要「滿足所有選擇器」的條件，最後就能篩選出特定的元素。下方的範例執行後，分別會篩選出下列的元素：

li 裡的 span 同時具有 fruit 和 circle 的 class，並且 sweet 屬性等於 a。

li 裡的 span 同時具有 toy 和 iron 的 class，並且 type 屬性等於 c。

class 為 human 的 span。

線上展示：https://codepen.io/oxxo/pen/abrZrpQ

<!-- HTML 程式碼 -->
<ul>
  <li><span class="human">oxxo</span></li>
  <li><span class="fruit circle" sweet="a">apple</span></li>
  <li><span class="fruit long" sweet="b">banana</span></li>
  <li><span class="fruit circle" sweet="b">orange</span></li>
</ul>
<ul>
  <li><span class="human">xoox</span></li>
  <li><span class="toy iron" type="a">car</span></li>
  <li><span class="toy plastic" type="b">robot</span></li>
  <li><span class="toy iron" type="c">train</span></li>
</ul>

<!-- CSS 程式碼 -->
<style>
  /* li 裡的 span 同時具有 fruit 和 circle 的 class，並且 sweet 屬性等於 a */
  li span.fruit.circle[sweet="a"] {
    color: red;
  }
  /* li 裡的 span 同時具有 toy 和 iron 的 class，並且 type 屬性等於 c */
  li span.toy.iron[type="c"] {
    color: red;
  }
  /* class 為 human 的 span */
  span.human {
    background: pink;
  }
</style>

CSS 教學 - 群組選擇器、組合選擇器 - 組合選擇器

權重加總的影響

當多個選擇器組成一個選擇器時，這個選擇器的權重就等於「多個選擇器的權重加總」下方列出一些不同的組合選擇器或群組選擇器權重：

詳細權重教學：CSS 選擇器的優先順序 ( 權重 )

選擇器	權重	說明
`span.human`	0-1-1	元素 x1、Class x1
`* p::first-line*`	0-0-2	通用選擇器不計算、元素 x1、虛擬元素 x1
`p.content span span em`	0-1-4	元素 x4、Class x1
`#title span[name="oxxo"]`	2-1-1	ID x1、元素 x1、屬性 x1
`li span.fruit.circle[sweet="a"]`	0-3-2	元素 x2、Class x2、屬性 x1
`.fruit.fruit.fruit.fruit.fruit`	0-5-0	Class x5

近年來，隨著 LESS 或 SASS 等 CSS 擴展語言的盛行，如果 CSS 架構沒有寫好，最後就會創造許多複雜的群組選擇器或組合選擇器，由於這些選擇器的巢狀結構和互相嵌套，往往就衍生出不少因為權重而無法設定樣式的狀況。因此關於群組選擇器或組合選擇器，建議的作法如下：

減少使用 ID 選擇器：

因 ID 選擇器權重很大，使用後如果要覆蓋樣式，就必須再次使用 ID 選擇器，產生更難維護的程式碼。

多使用 Class 或屬性選擇器：

透過 Class 或屬性選擇器，可以讓程式碼更有意義並更容易理解，也更容易進行覆蓋樣式的動作。

減少文件架構選擇器的深度：

如果文件架構深度太深，閱讀上就不容易理解，例如 ul li ul li ul li 無法馬上是哪一層。

小結

基本上群組選擇器和組合選擇器，就是將 ID、Class、屬性、元素、虛擬類別和虛擬元素選擇器互相搭配組合，也是學習 CSS 的基本技巧，只要把握好組合的原則，理解權重的加總，就能撰寫出漂亮又乾淨的 CSS 程式碼囉！

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

群組選擇器、組合選擇器