一篇文章带你搞懂 CSS 选择器（带示例 + 对比 + 优缺点总结）

CSS 选择器是用来精准匹配页面元素、给元素设置样式的核心工具。很多人写页面出现样式不生效、样式乱覆盖、调试困难，本质都是对选择器的分类、用法、权重、优缺点、使用场景不够清晰。

本文从基础到高阶，完整梳理 CSS 选择器体系，每类都带 1-2 个实战例子，并附上详细对比、优缺点、使用规范，一篇吃透。

---

一、基础选择器

1. 通配符选择器 *

匹配页面所有元素。

css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

示例说明 ：统一清空所有标签默认内外边距，统一盒模型规则。优点 ：一次性重置所有样式，小页面极快。缺点 ：性能差，遍历全部 DOM，大型项目不推荐全局使用。使用场景：简单页面样式重置。

---

2. 元素选择器（标签选择器）

直接用HTML 标签名匹配。

css

p {
  font-size: 14px;
  line-height: 1.5;
}

div {
  margin-bottom: 10px;
}

示例说明 ：页面所有 <p> 统一字号行高，所有 <div> 统一底部间距。优点 ：方便统一页面标签默认样式。缺点 ：范围太大，容易影响不需要的标签。使用场景：全局基础样式统一。

---

3. 类选择器 .className（最常用）

匹配标签上的 class 属性。

css

.btn {
  padding: 6px 12px;
  border-radius: 4px;
}

.page__bd {
  width: 100%;
  padding: 15px;
}

html

预览

<div class="page__bd">
  <button class="btn">按钮</button>
</div>

示例说明 ：给按钮加公共样式，给页面主体加布局样式。优点 ：灵活、可复用、权重适中、配合 BEM 最稳定。缺点 ：无明显缺点。使用场景：90% 业务开发、组件样式、UI 还原。

---

4. ID 选择器 #id

匹配标签上的 id 属性，页面唯一。

css

#header {
  height: 45px;
  background: #fff;
}

html

预览

<div id="header">头部</div>

示例说明 ：给唯一头部元素设置高度和背景色。优点 ：匹配精准、权重高。缺点 ：权重太高，样式难以覆盖，不可复用。使用场景：极少用于 CSS，多用于 JS 获取唯一元素。

---

二、组合选择器

1. 后代选择器（空格）

匹配父元素内部所有层级的子元素。

css

.page p {
  color: #333;
}

示例说明 ：匹配 .page 里面所有 <p>，不管嵌套多少层。优点 ：写法简单。缺点：层级深、权重不可控、容易误匹配。

---

2. 子代选择器 >

只匹配直接子元素（第一层）。

css

.page > div {
  border: 1px solid #eee;
}

示例说明 ：只匹配 .page 下第一层 的 <div>，更深层不生效。优点 ：精准、不污染深层元素。缺点：层级固定。

---

3. 相邻兄弟选择器 +

匹配紧贴在后面的第一个同级元素。

css

.title + .content {
  margin-top: 8px;
}

示例说明 ：给 .title 后面紧挨着 的第一个 .content 设置上边距。优点 ：可做相邻元素特殊样式。缺点：范围太窄。

---

4. 通用兄弟选择器 ~

匹配当前元素后面所有同级元素。

css

.item ~ .item {
  margin-top: 10px;
}

示例说明 ：给 .item 后面所有同级 .item 设置间距。优点 ：批量控制同级元素。缺点：只向后匹配。

---

5. 并集选择器 ,

多个选择器共用一套样式。

css

.btn-primary, .btn-default {
  height: 30px;
  line-height: 30px;
}

示例说明 ：两种按钮统一高度和行高。优点 ：精简代码、减少重复。缺点：维护时需注意关联性。

---

三、属性选择器 [ ]

根据标签属性与值筛选元素。

css

/* 1. 包含 type 属性 */
input[type] {
  border: 1px solid #ccc;
}

/* 2. type 等于 text */
input[type="text"] {
  padding: 6px;
}

/* 3. 以 http 开头 */
a[href^="http"] {
  color: blue;
}

示例说明 ：精准匹配表单、链接等带属性的标签。优点 ：不用写 class，适合表单、自定义属性。缺点：可读性不如类选择器。

---

四、伪类与伪元素选择器

1. 伪类选择器 :

匹配元素状态 / 位置。

css

/* 鼠标悬浮 */
.btn:hover {
  opacity: 0.8;
}

/* 第一个子元素 */
.list li:first-child {
  font-weight: bold;
}

示例说明 ：按钮悬浮变透明，列表第一项加粗。优点 ：不新增标签就能写状态样式。缺点：过多使用会让样式逻辑变复杂。

---

2. 伪元素选择器 ::

创建虚拟元素，不占 DOM 结构。

css

/* 头部前面加小图标 */
.title::before {
  content: "";
  width: 4px;
  height: 16px;
  background: red;
}

/* 清除浮动 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

示例说明 ：用伪元素做装饰、做清除浮动，不增加 HTML 标签。优点 ：不占 DOM、结构干净。缺点：调试相对不直观。

---

五、选择器详细对比表（重点）

表格

选择器类型	优先级	复用性	性能	维护难度	推荐度
通配符 *	最低	最高	差	低	⭐
标签选择器	低	高	良	中	⭐⭐⭐
类选择器 .	中	高	优	低	⭐⭐⭐⭐⭐
ID 选择器 #	高	低	优	高	⭐
后代选择器	中高	中	一般	高	⭐⭐
子代选择器 >	中	中	良	中	⭐⭐⭐⭐
属性选择器	中	中	良	中	⭐⭐⭐
伪类 / 伪元素	中	高	优	中	⭐⭐⭐⭐

---

六、选择器权重规则（必背）

权重从低到高：

plaintext

继承 < 通配符 < 标签 < 类/属性/伪类 < ID < 行内样式 < !important

一句话总结 ：权重越高，越优先显示；权重相同，后面覆盖前面。

---

七、各类选择器优缺点总结

1. 通配符

优点：快、省事缺点：性能差、全局污染不建议项目全局使用

2. 标签选择器

优点：统一风格方便缺点：范围太大、容易误伤

3. 类选择器（最强）

优点：灵活、可复用、权重合理、易维护缺点：无项目首选

4. ID 选择器

优点：匹配快缺点：权重太高、无法覆盖、不可复用不建议写 CSS 样式

5. 后代选择器

优点：简单缺点：层级深、难维护、易出 bug尽量少用

6. 子代选择器

优点：精准、不污染推荐常用

7. 伪类 / 伪元素

优点：功能强、不占 DOM必备技能

---

八、最终总结（最核心）

1. 选择器核心结论

• 类选择器是开发最优解，灵活、安全、易维护。
• ID 不适合写 CSS。
• 后代选择器慎用，子代选择器更安全。
• 伪类、伪元素是高级必备技能。

2. 项目规范总结

• 优先使用 类选择器 + BEM
• 嵌套不超过 2 层
• 不用 ID、不用通配符全局重置
• 伪元素用来做装饰、结构优化
• 权重保持平稳，不滥用 !important