在CSS样式设计中，元素选择器是最直接也最常用的一种选择器。它通过HTML标签名称来选中页面上对应的所有元素，从而统一施加样式规则。比如你想让网页里所有的段落文字都变成灰色，只需要针对p标签写一条规则即可。
什么是元素选择器
元素选择器又叫类型选择器，它的写法就是直接使用HTML标签名作为选择器。浏览器在解析样式表时，会把这条规则应用到文档中每一个该标签的元素上，不需要添加任何类名或者id。
基础语法与示例
元素选择器的基本语法非常简洁，结构如下：
/* 选中所有 h1 元素 */
h1 {
color: #333;
font-size: 24px;
}
/* 选中所有 p 元素 */
p {
line-height: 1.6;
color: #666;
}
/* 选中所有 a 元素 */
a {
text-decoration: none;
}
在上面代码中，h1、p、a都是元素选择器。只要页面里出现了对应的标签，就会自动套用这些样式。
在HTML中的实际结构
配合下面的HTML结构，可以直观看到元素选择器的作用范围：
<!DOCTYPE html>
<html>
<head>
<style>
li {
color: blue;
}
</style>
</head>
<body>
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>
</body>
</html>
这段示例里，li元素选择器让列表中的两项都变成了蓝色，不需要给每个li加额外属性。
常见使用场景
- 统一重置浏览器默认样式，例如给所有strong标签设基础字重
- 为文章页的所有blockquote设置左边框和缩进
- 批量调整表格table和td的边框与间距
需要注意的问题
元素选择器的优先级在CSS中是最低的。如果后面用了类选择器如.intro或者id选择器如#top，并且设置了同样的属性，那么元素选择器里的样式会被覆盖。另外，元素选择器选中范围较广，若只想改部分元素，应配合类选择器使用。
优先级对比
| 选择器类型 | 示例 | 优先级 |
|---|---|---|
| 元素选择器 | p | 1 |
| 类选择器 | .text | 10 |
| id选择器 | #main | 100 |
小结
CSS元素选择器用法简单但很实用，是样式设计的第一步。理解它的书写方式和生效规则，能帮你更高效地写和维护样式表。在真实项目中，通常会把元素选择器用在基础重置和全局排版上，具体模块再交给其他选择器处理。