一篇文章带你搞懂 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;
}

示例说明：页面所有

统一字号行高，所有

统一底部间距。优点：方便统一页面标签默认样式。缺点：范围太大，容易影响不需要的标签。使用场景：全局基础样式统一。

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

匹配标签上的 class 属性。

css

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

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

html

预览

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

4. ID 选择器 #id

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

css

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

html

预览

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

二、组合选择器

1. 后代选择器（空格）

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

css

.page p {
  color: #333;
}

示例说明：匹配 .page 里面所有

，不管嵌套多少层。优点：写法简单。缺点：层级深、权重不可控、容易误匹配。

2. 子代选择器 >

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

css

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

示例说明：只匹配 .page 下第一层的

，更深层不生效。优点：精准、不污染深层元素。缺点：层级固定。

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

聊天