群组与组合选择器

CSS 提供了非常多样的选择器，这些选择器不仅可以单独使用，也可以组成群组的形式，或将不同的选择器组合串连成新的选择器，这篇教学会介绍群组选择器和组合选择器的用法。

快速导览：

• 群组选择器
• 使用 :is() 简化群组选择器
• 组合选择器
• 权重加总的影响

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

群组选择器

“群组选择器”顾名思义，就是将多个不同的选择器使用逗号“,”组成“群组”，只要是群组里的选择器，就可以套用“相同的样式”，例如下方的 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 呈现四个结构选择器所组成的群组。

<!-- 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>

使用 :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>

组合选择器

“组合选择器”表示“将多个选择器组合成一个新的选择器”，换句话说就是种“选择器交集”的概念，只要“满足所有选择器”的条件，最后就能筛选出特定的元素。下方的范例执行后，分别会筛选出下列的元素：

• 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 选择器的优先级 ( 权重 )

近年来，随着 Less 或 Sass 等 CSS 扩展语言的盛行，如果 CSS 架构没有写好，最后就会创造许多复杂的群组选择器或组合选择器，由于这些选择器的巢状结构和互相嵌套，往往就衍生出不少因为权重而无法设定样式的状况。因此关于群组选择器或组合选择器，建议的作法如下：

• 减少使用 ID 选择器：

  因 ID 选择器权重很大，使用后如果要覆盖样式，就必须再次使用 ID 选择器，产生更难维护的程序码。

• 多使用 Class 或属性选择器：

  透过 Class 或属性选择器，可以让程序码更有意义并更容易理解，也更容易进行覆盖样式的动作。

• 减少文件架构选择器的深度：

  如果文件架构深度太深，阅读上就不容易理解，例如 ul li ul li ul li 无法马上是哪一层。

小结

基本上群组选择器和组合选择器，就是将 ID、Class、属性、元素、虚拟类别和虚拟元素选择器互相搭配组合，也是学习 CSS 的基本技巧，只要把握好组合的原则，理解权重的加总，就能撰写出漂亮又干净的 CSS 程序码啰！

意见反馈