元素选择器

元素选择器也可以称作标签选择器，是最常见也最简单的 CSS 选择器，只要知道了 HTML 元素的标签名称，就能够选取这个元素，并替这个元素套用样式，这篇教学会介绍元素选择器、通用选择器以及一些使用时的注意事项。

快速导览：

• 通用选择器
• 元素选择器 ( 标签选择器 )
• 支援自订元素、不区分大小写
• 元素选择器的注意事项

教学影片

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

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

通用选择器

“通用选择器”也称作“万用字元选择器”，使用一个星号“*”表示，使用后会选取“所有的元素”，以下方的 CSS 为例，使用通用选择器后，所有的文字都会变成红色。

虽然通用选择器很方便，但使用时的权重为“0-0-0”，所以通常作为 CSS 初始化相关功能使用。

* {color: red;}

通用选择器也可以搭配 id、class 或属性，但使用后的效果与单纯使用 id、class 或属性相同，因此也比较少人这么使用。

*#steam {color: red; }
*.oxxo {color: red; }
*[hello] {color: red; }

/* 效果等同於 */

#steam {color: red; }
.oxxo {color: red; }
[hello] {color: red; }

元素选择器 ( 标签选择器 )

元素选择器也可以称作标签选择器，泛指 HTML 里所有的元素，只要“不是网页信息元素”，基本上都能透过元素选择器设定样式 ( 因为网页信息元素属于不会显示的元素 )。

更多参考：“HTML 标签与架构、HTML 元素显示类型

以下方的 CSS 为例，透过不同的元素选择器，就能让不同的元素显示不同的文字颜色。

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

<!-- CSS 程式碼 -->
<style>
  h1 {color: red;}
  h2 {color: blue;}
  p {color: green;}
</style>

支援自订元素、不区分大小写

在现代浏览器普遍都支援“自订元素”的情况下，元素选择器也支援“自订元素”，不过仍建议使用标准元素，如此对于 SEO 才有比较正面的效果 ( 搜索引擎才知道这个元素的意义是什么 )，下方的 CSS 会将 <oxxo> 元素里的文字变成红色。

oxxo {color: red;}

此外，因为 HTML 的元素本身就“不区分英文大小写”，因此元素选择器也具有“不区分英文字母大小写”的特性，如果将 h1 写成 H1，也是可以顺利选取元素。

h1 {color: red;}

/* 效果等同於 */

H1 {color: red;}

元素选择器的注意事项

元素选择器虽然很简单，但使用时需要注意“不能重复连接”使用，通常使用 id 或 Class 选择器时，有时可以透过“重复连接”的方式“增加权重”，但因为元素选择器有支援自订元素的特性，当把元素标签连接在一起时，会变成一个全新的标签名称，所以这种做法不能用于元素选择器。

以下方的 CSS 为例，可以重复使用三个 .apple Class 选择器让权重变成 0-3-0，文字呈现红色，但如果是连续三个 h1，反而会去选取名为“h1h1h1”的标签，造成找不到元素的状况，最后 h1 还是呈现黑色。

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

<!-- CSS 程式碼 -->
<style>
  .apple.apple.apple {color: red;}
  h1h1h1 {color: red;}
</style>

小结

元素选择器是最常使用的选择器，几乎所有的 CSS 样式表都会出现这种选择器，而通用选择器虽然权重最低，但却时常作为 CSS 初始化使用，可以很快速的将固定的样式套用到所有元素，是很方便的选择器喔。

意见反馈