CSS 选择器与权重（2025-2026 面试 & 日常开发核心知识）

1. 基础选择器（最基础、最常用）

选择器类型	写法示例	匹配对象	性能排名	使用频率（2025-2026）
类型选择器	`div`, `p`, `a`	指定标签元素	★★★★	★★★★☆
类选择器	`.btn`, `.card-title`	带有指定 class 的元素	★★★★★	★★★★★（最常用）
ID 选择器	`#header`, `#main`	唯一 ID 的元素	★★★★★	★★★☆☆（慎用）
通配符	`*`	页面所有元素	★☆☆	★☆☆（几乎不用）
全局选择器	`html`, `body`	根元素或特定全局元素	★★★★	★★★★

现代建议：

优先使用类选择器（可维护性 + 性能 + 复用性最佳）
ID 选择器主要用于 JavaScript 锚点，样式尽量少用
绝不在组件化项目中使用 * 作为主要选择器

2. 组合与关系选择器（决定层级与范围）

关系类型	写法示例	匹配规则	常见使用场景	性能影响
后代选择器	`.card p`	.card 内部任意层级的 p	组件内部文字样式	中等
子代选择器	`.menu > li`	.menu 直接子元素 li	一级菜单项	较高
相邻兄弟	`h2 + p`	紧跟在 h2 后面的第一个 p	标题后的首段落	较高
通用兄弟	`h2 ~ p`	h2 后面所有兄弟 p（不一定紧邻）	标题后所有正文段落	中等

性能口诀（浏览器从右往左匹配）：

越靠右的条件越具体 → 性能越好
推荐写法：.card-title + .card-desc > .card .card-desc

3. 属性选择器（Attribute Selectors）

写法	含义	常见场景
`[attr]`	存在 attr 属性	`[data-tooltip]`
`[attr="value"]`	属性值完全等于 value	`[type="checkbox"]`
`[attr*="value"]`	属性值包含 value	`[class*="btn"]`
`[attr^="value"]`	属性值开头是 value	`[href^="https://"]`
`[attr$="value"]`	属性值结尾是 value	`[href$=".pdf"]`
`[attr	=”value”]`	属性值以 value- 开头（常用于 lang）

2025-2026 常用：[data-*] 自定义属性 + 属性选择器（组件状态、主题等）

4. 伪类（Pseudo-classes）—— 状态与结构

4.1 常用结构伪类（:nth-* 系列最常考）

伪类	说明	经典使用场景
`:first-child`	作为父元素的第一个子元素	列表第一项去掉上边框
`:last-child`	作为父元素的最后一个子元素	列表最后一项去掉下边框
`:nth-child(n)`	第 n 个子元素（从 1 开始）	隔行变色 `tr:nth-child(even)`
`:nth-child(odd/even)`	奇/偶数	斑马纹
`:nth-child(2n+1)`	自定义步长（2n+1 = odd）	每三行一个样式 `nth-child(3n+1)`
`:only-child`	父元素唯一子元素	独生子特殊样式
`:first-of-type` / `:last-of-type`	同类型中的第一个/最后一个	同标签组第一个标题

4.2 常用状态伪类

伪类	触发时机	推荐权重与写法建议
`:hover`	鼠标悬停	必须写在 `:focus` 后面
`:focus`	获得焦点（键盘/点击）	不要单独使用，配合 `:focus-visible`
`:focus-visible`	键盘焦点（最推荐）	现代项目必须使用
`:active`	按下（鼠标/空格/回车）	配合 `transition` 做按下感
`:disabled`	禁用状态	必须明显区分（opacity + cursor）
`:checked`	radio/checkbox 被选中	自定义表单控件核心
`:required`	带有 required 属性的表单元素	视觉提示必填

交互状态正确顺序（cascade 顺序）：

a { color: blue; }
a:visited { color: purple; }
a:hover { color: hotpink; }
a:focus-visible { outline: ... }
a:active { color: red; }

5. 伪元素（Pseudo-elements）—— 常用 ::before / ::after

伪元素	用途	经典用法示例
`::before`	在元素内容前插入虚拟元素	图标、序号、装饰线
`::after`	在元素内容后插入虚拟元素	清除浮动、箭头、loading 指示器
`::first-line`	元素首行文字	文章首行大写/变色
`::first-letter`	元素首字母	报纸风格首字母放大
`::selection`	用户选中文本时的样式	自定义高亮背景色
`::placeholder`	输入框占位符	美化 placeholder

::before/::after 必备属性（不写会不生效）：

.element::before {
  content: "";           /* 必须有！哪怕空字符串 */
  display: block/inline-block; /* 常用 */
}

6. 权重计算规则（Specificity）—— 面试必考

计算公式（从高到低）：

0,0,0,0 → 0,0,0,0
│ │ │ │
│ │ │ └─ 元素/伪元素 (0,0,0,1)
│ │ └─ 类/属性/伪类   (0,0,1,0)
│ └─ ID               (0,1,0,0)
└─ 行内 style         (1,0,0,0)

常见对比：

#header .title a:hover       /* 0,1,1,1 */
#sidebar a                   /* 0,1,0,1 */
.article p                   /* 0,0,0,2 */
div > p:first-child          /* 0,0,1,1 */

优先级顺序：
!important > 行内 > id > class/属性/伪类 > 元素 > * / 继承

冲突处理黄金法则（2025-2026 推荐）：

尽量不使用 !important
能用类解决不用 id
同权重 → 后面覆盖前面（就近原则）
权重相同且顺序相同 → 看代码书写顺序
实在覆盖不了 → 提高选择器特异性（加类/父级）或调整代码顺序

快速记忆口诀：

1个 id = 10个 class = 100个标签
!important 是作弊键，能不用就不用