认识 CSS 选择器

CSS 选择器 ( Selector ) 是 CSS 的核心功能，也是使用或学习 CSS 时最重要的技巧，透过特定的选择器的规则，就能快速地找出某些元素，并针元素进行样式的设定，这篇教学会引导大家认识 CSS 选择器并开始使用 CSS 选择器。

快速导览：

• CSS 选择器是什么？
• CSS 选择器的种类
• CSS 选择器的命名空间
• 造成 CSS 选择器无效的状况

教学影片

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

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

CSS 选择器是什么？

“CSS 选择器”如同字面的意思，会根据特定的“规则”，例如元素名称、类别、ID、属性或其他特定条件，“选择”HTML 里的特定元素，可单独选取一个或一次选取多个元素，选取后就能设定元素的样式。以下方的程序码为例，HTML 里有两个 h2 元素，使用 CSS 选择器就能一次让两个 h2 的文字都变成红色。

<!-- HTML 程式碼  -->
<h2>STEAM 教育學習網</h2>
<h2>OXXO.STUDIO</h2>

<!-- CSS 程式碼  -->
<style>
  h2 {color: red;}  /* 所有的 h2 都變成紅色文字 */
</style>

CSS 选择器的种类

CSS 选择器根据使用的规则，主要分成“通用选择器、元素选择器、类别与 ID 选择器、属性选择器、群组选择器、文件结构选择器、虚拟类别选择器和虚拟元素选择器”。

• 通用选择器

  “通用选择器”表示“所有元素”，其代表符号为一个星号“*”，使用后会将样式套用到所有的元素，通用选择器常用在进行“CSS 初始化”的动作，以下方的 CSS 为例，所有的元素都会套用红色文字的样式。

  * {color: red;}
  

• 元素选择器

  “元素选择器”表示“ HTML 元素”，只要是常用的 HTML 元素标签 ( h1、h2、p、a...等 )，或是 HTML 所构成的元素标签 ( html、body...等 )，都可以透过元素选择器进行选择，以下方的 CSS 为例，h1 元素套用红色文字，h2 元素套用蓝色文字，p 元素套用绿色文字。

  • 详细教学参考：元素选择器 ( 标签选择器 )

  h1 {color: red;}
  h2 {color blue;}
  p {color: green;}
  

• ID 与 Class 选择器

  “ID 与 Class 选择器”表示“HTML 的 id 和 class”，ID 使用“#”开头，class 使用“.”开头，以下方的 CSS 为例，class 为 girl 会套用红色文字样式，class 为 boy 会套用蓝色文字样式，id 为 oxxo 会套用绿色文字样式。

  • 详细教学参考：ID 和 Class 选择器 ( 类别选择器 )

  .girl {color: red;}
  .boy {color blue;}
  #oxxo {color: green;}
  

• 属性选择器

  “属性选择器”表示“HTML 元素的属性”，可以选择“具有某些属性的元素，或某些属性等于特定数值的元素”，以下方的 CSS 为例，具有 class 属性的元素会套用红色文字样式，具有 name 属性等于 oxxo 的元素会套用蓝色文字样式。

  • 详细教学参考：属性选择器

  .h2[class] {color: red;}
  .h2[name="oxxo"] {color blue;}
  

• 文件结构选择器

  “结构选择器”表示“HTML 元素上下层的结构关系”，这个选择器可以利用一些“符号”来表示结构的关系，例如“+”表示元素的“下一个元素”，“>”表示“元素里的下一层元素”，以下方 CSS 为例，与 h1 同层的下一个 span 元素会套用红色文字，再下一个则保持黑色，而 h1 里面的下一层 span 元素会套用蓝色文字。

  • 详细教学参考：文件结构选择器

  <!-- HTML 程式碼  -->
  <h1>oxxo.studio
  <span>我是藍色</span>
  </h1>
  <span>hello world!!</span>
  <span>我是黑色</span>
  
  <!-- CSS 程式碼  -->
  <style>
    h1 + span {color: red;}    /* h1 相鄰的第一個 span 變成紅色文字 */
    h1 > span {color: blue; }  /* h1 的子元素 span 變成紅色文字 */
  </style>
  

  

• 虚拟类别选择器 ( 伪类 )

  “虚拟类别选择器”表示“HTML 目前不存在的类别、特定元素的状态”，开头使用一个冒号“:”，虚拟类别的本质通常都与“结构或状态”有关，可以根据“结构”，选取特定位置的元素，或根据用户操作时动态产生的“状态”，选取特定状态的元素，以下方的 CSS 为例，清单里的“偶数项目”会是红色文字，如果用户鼠标移动到文字上方，文字会变成蓝色。

  详细教学参考：

  • 虚拟类别选择器 ( 结构位置 )
  • 虚拟类别选择器 ( 类型位置 )
  • 虚拟类别选择器 ( 表单输入 )
  • 虚拟类别选择器 ( 用户操作行为 )
  • 虚拟类别选择器 ( 超链接 )
  • 虚拟类别选择器 ( 逻辑判断 )
  • 虚拟类别选择器 ( 其他、语系 )

  <!-- HTML 程式碼  -->
  <ul>
    <li>oxxo.studio</li>
    <li>紅色的 STEAM 教育學習網</li>
    <li>我是黑色</li>
    <li>我是紅色</li>
    <li>我又是黑色</li>
  </ul>
  
  <!-- CSS 程式碼  -->
  <style>
    li:nth-child(2n) {color: red;}  /* 偶數的 li 會變成紅色文字 */
    li:hover {color: blue;}         /* 滑鼠移動到 li 上方會是藍色文字 */
  </style>
  

  

• 虚拟元素选择器 ( 伪元素 )

  所谓的“虚拟元素”也称为“伪元素”，表示不存在于真实的 HTML 元素，可能是“想像的元素”或根据现有元素进行“想像分类”，而“虚拟元素选择器”就是专门针对这些“想像元素或分类”的选择器，开头使用两个冒号“::”。

  虽然虚拟元素不存在于真实的 HTML 元素，但只要 CSS 撰写了相关的样式，虚拟元素在网页渲染时就会出现在 HTML 里或将现有元素分类并套用样式，以下方的 CSS 为例，在 h1 的前方会使用“::before”加入“123”，后方会使用“::after”加入“456”。

  • 注意 1、一个选择器中只能包含一个虚拟元素，且必须放在选择器的最末端。
  • 注意 2、虽然目前浏览器支援虚拟元素选择器使用“一个冒号”，但仍建议使用“两个冒号”，避免不同浏览器或支援度改变造成的错误。

  • 详细教学参考：虚拟元素选择器

  <!-- HTML 程式碼  -->
  <h1>oxxo.studio</h1>
  
  <!-- CSS 程式碼  -->
  <style>
    h1::before {content: "123";}
    h1::after {content: "456";}
  </style>
  

  

• 群组或组合选择器

  “群组选择器”表示“多个不同的选择器，套用相同的样式”，如果有多个选择器要套用相同的样式，可以利用逗号“,”分隔不同的选择器，以下方 CSS 为例，四个选取器所选到的元素，都会套用红色文字样式。

  • 详细教学参考：群组选择器、组合选择器

  h1, h2, a[title], p {color: red;}
  

  “组合选择器”表示“将多个选择器进行串联组合”，如果有多个元素同时使用了相同的 Class 或属性，则可以利用组合选择器的方式进行筛选，以下方 CSS 为例，虽然两个 ul 都有同样的 Class 名称，但却可以根据选择器的组合，套用不同的样式，甚至运用虚拟类别和虚拟元素，做出截然不同的效果。

  <!-- HTML 程式碼  -->
  <ul class="fruit" type="a">
    <li>oxxo</li>
    <li>apple</li>
    <li>banana</li>
  </ul>
  <ul class="fruit" type="b">
    <li>orange</li>
    <li>grape</li>
    <li>papaya</li>
  </ul>
  
  <!-- CSS 程式碼  -->
  <style>
    /* class + 屬性 */
    .fruit[type="a"] {
      background: pink;
      color: red;
    }
    /* class + 屬性 + 結構 + 虛擬類別 */
    .fruit[type="a"] li:nth-child(2) {
      background: red;
      color: white;
    }
    /* class + 屬性 + 結構 + 虛擬類別 + 虛擬元素 */
    .fruit[type="b"] li:nth-child(2n-1)::marker {
      content: ">> "
    }
  </style>
  

  

CSS 选择器的命名空间

通常在撰写 CSS 时，所使用的命名空间通常表示“指向同一个位址的整份 HTML 文件”，只要是同一份文件里的所有元素，都能够透过 CSS 选择器套用样式，但如果在 HTML 使用了 SVG 元素，则可能会发生选择器冲突的状况 ( 例如 HTML 里的 a 元素不同于 SVG 里的 a 元素 )，然而如果使用“命名空间”，就能够针对不同的文件类型进行区隔。

通常在撰写 CSS 时，会采用下方的写法：

* {font-size: 14px;}
h1 {font-size: 20px;}

上述的写法表示 CSS 采用“整份 HTML 文件”的作用空间，也可以改成下方“包含命名空间”的完整写法：

*|* {font-size: 14px;}    /* 這份 HTML 裡的所有元素 */
*|h1 {font-size: 20px;}   /* 這份 HTML 裡的所有 h1 */

如果要明确区隔 HTML 和 SVG 的命名空间，可以使用“@namespace”进行定义和区分，以下方的 CSS 为例，整份文件的 a 会是红色文字，而位于 SVG 里的 a 则会是蓝色 ( 注意 HTML 里的 SVG 有宣告指向位址 )。

<!-- HTML 程式碼  -->
<a href="#">STEAM 教育學習網</a>
<br/>
<svg width="120px" viewBox="0 0 120 50" xmlns="http://www.w3.org/2000/svg">
  <a href="#">
    <text x="0" y="20">OXXO.STUDIO</text>
  </a>
</svg>

<!-- CSS 程式碼  -->
<style>
  @namespace svg url('http://www.w3.org/2000/svg');  /* 定義命名空間 */
  a {color: red;}      /* 命名空間使用整份文件 */
  SVG|a {fill: blue;}  /* 命名空間使用 SVG */
</style>

造成 CSS 选择器无效的状况

虽然 CSS 的选择器很强大，但仍然会有一些造成“选择器无效”而无法选取元素的状况，下方列出常见的原因：

• 名称拼写错误

  因为 CSS 选择器使用“元素名称、类别名称、ID 名称”作为选取依据，如果名称拼写错误，就会找不到对应的元素。

• 权重与顺序错误

  元素会按照 CSS 选择器的权重或执行的顺序套用样式，“权重越高”或“顺序在后方”的优先套用，如果权重或顺序错误，就会发生无效的状况 ( 参考“优先级 ( 权重 )”)。

• 使用不存在的虚拟类别或虚拟元素

  在使用“群组选择器”时，如果群组里出现了“不存在”或“不正确”的虚拟类别或虚拟元素，则该群组选择器就会无效，群组里所有的元素都不会套用样式，以下方的 CSS 为例，因为群组里出现了“:oxxo”奇怪虚拟类别，就造成这个选择器失效，连同 h1、h2 都无法套用样式，但如果该虚拟样式前方加上“-webkit-”，则可以正常运作 ( 不过奇怪的名称本来就无法识别，也尽量不要使用 )。

  h1, h2, p:oxxo {
    color: red;  /* 無法識別 :oxxo，選擇器無效 */
  }
  h1, h2, p:-webkit-oxxo {
    color: red;  /* 無法識別 :-webkit-oxxo，不過因為有加上 -webkit-，所以還是可以套用樣式 */
  }
  

小结

由于在 HTML 里，必须要精准控制各个元素的样式，因此 CSS 选择器 ( Selector ) 就是 CSS 的精华所在，也是操控 CSS 不得不学的重要技术，俗话说“只要掌握了选择器，就掌握了 CSS”( 自己讲的 )，就请务必学好 CSS 选择器！

意见反馈