ID 和 Class 选择器

ID 选择器和 Class 选择器 ( 类别选择器 ) 也是常见的选择器，可以选取特定 ID 或 Class 的元素，方便网页设计师或工程师精准控制样式，这篇教学会介绍 ID 和 Class 选择器。

延伸阅读：ID、Class 与属性命名原则

快速导览：

• ID 选择器
• Class 选择器 ( 类别选择器 )
• 多重 Class 选择器

教学影片

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

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

ID 选择器

ID 选择器使用“#”开头，会选取 HTML 里具有“id”属性的元素，id 名称“区分大小写”，基本写法如下：

<!-- HTML 程式碼 -->
<h1 id="oxxo">OXXO.STUDIO</h1>
<h2 id="hello">Hello World!!</h2>

<!-- CSS 程式碼 -->
<style>
  #oxxo {color: red;}
  #hello {color: orange;}
</style>

由于一份 HTML 文件里，同一个 ID 只会出现一次 ( 如果出现重复的 ID 一定是 HTML 写错 )，所以 ID 选择器是 CSS 所有选择器里“权重最大”的选择器，其权重仅次于 HTML 的行内样式与套用 !important 的属性，也因为这个特性，通常会“独立撰写”ID 选择器，或将 ID 选择器放置于整串结构选择器的“最前方”。

由于许多开发者会使用 Sass 与 LASS 等 CSS 预处理器撰写 CSS，所以越来越常见到 ID 选择器放在其他选择器之下的状况，虽然不影响执行结果，但在架构上仍建议直接使用正规写法。

正规 ID 选择器写法：

#oxxo {color: red;}
#oxxo span {color: orange;}

非正规 ID 选择器写法：

div #oxxo {color: red;}
div span #oxxo {color: red;}

Class 选择器 ( 类别选择器 )

Class 选择器使用“.”开头，会选取 HTML 里具有“class”属性的元素，class 名称“区分大小写”，基本写法如下：

<!-- HTML 程式碼 -->
<h1 class="oxxo">OXXO.STUDIO</h1>
<h2 class="hello">Hello World!!</h2>

<!-- CSS 程式碼 -->
<style>
  .oxxo {color: red;}
  .hello {color: orange;}
</style>

由于 class 属于可以“重复出现”的属性，一份 HTML 文件里可能会出现多个同名的 class，所以有时会将“标签”和“class”结合，变成更有指向性的 class 选择器，以下方的 CSS 为例，如果只是设定“.oxxo”的样式，会造成所有具有 oxxo 类别的元素都变成红色文字，但如果设定“h2.oxxo”，就能明确表示具有 oxxo 类别的 h2 元素才会变成红色文字。

所有同名 class 都会套用的写法：

.oxxo {color: red;}

只有具有特定 class 的 h2 才会套用的写法：

h2.oxxo {color: red;}

多重 Class 选择器

撰写 HTML 时，常常会将某个元素，套用多个 class，因此 CSS 的 class 选择器也支援“多重 class 选择器”，只要将 class 名称串连，就能明确指向“同时具有这些 class 名称”的元素，撰写时需要注意 class 名称间“不能有空白”，因为有空白就表示“子元素”。

不正确写法：

.a .b .c {color: red;}     /* .b 是 .a 的子元素，.c 是 .b 的子元素 */

正确写法：

.a.b.c {color: red;}

举例来说，h1 元素同时具有 a、b、c 三个 class，h2 元素则同时具有 a、c 两个 class，透过多重 class 选择器就能精准控制 h1 和 h2 元素的样式，也由于 .a.b.c 的权重为 0-3-0，.a.c 的权重为 0-2-0，所以 h1 不会被 .a.c 影响，最后就会呈现红色，而 h2 因为没有 .b，就会采用 .a.c 的样式而呈现蓝色。

多重 Class 选择器串连后的权重，会按照权重计算原则进行相加，参考“CSS 选择器的优先级 ( 权重 )”

<!-- HTML 程式碼 -->
<h1 class="a b c">OXXO.STUDIO</h1>
<h2 class="a c">Hello World!!!</h2>

<!-- CSS 程式碼 -->
<style>
  .a.b.c {color: red;}
  .a.c {color: blue;}
</style>

小结

ID 选择器和 Class 选择器都是非常基本且常用的 CSS 选择器，使用上仅需注意 ID 选择器的权重最大，以及 Class 选择器多重套用的原则，其他使用上就如同元素选择器一样容易上手喔。

意见反馈