🎨 CSS选择器的优先级
✍️ 作者：桑榆
🕓 更新时间：2025-11-04
🧠 关键词：css选择器，类选择器，id选择器，属性选择器，伪类选择器，伪元素选择器，通配符选择器
🧩 前言
最近在设计组件的时候，发现了一个问题：当一个元素同时被多个选择器选中时，那最后应用的样式是哪个？ 举个例子： 我在设计按钮组件的时候，比如说我的按钮类型是primary，这个类型的按钮背景颜色默认是蓝色的。 那么当我给按钮的color属性传递了#ff1231,那么按钮的颜色最后展示什么呢？ 答案是：#ff1231 那这个就是今天的博客的主题：CSS选择器的优先级。 遇到样式冲突的情况。这时，浏览器会根据选择器的"优先级（Specificity）" 决定哪个样式最终生效。
一、优先级的基本原则
CSS 优先级可理解为“权重”系统，每种选择器类型都有一个特定的分值。浏览器会计算所有选择器的总分来决定谁胜出。
| 选择器类型 | 实例 | 权重记法(a,b,c,d) | 说明 |
|---|---|---|---|
| 内链样式(inline) | <div style='color:red'></div> | (1,0,0,0) | 优先级最高 |
| ID选择器 | #header | (0,1,0,0) | 每个ID增加1 |
| 类、属性、伪类选择器 | .btn/[type="text"]/:hover | (0,0,1,0) | 每个类或伪类加1 |
| 元素、伪元素选择器 | div/::before | (0,0,0,1) | 每个元素或伪元素加1 |
| 通配符、组合符 | *、>、+、～ | (0,0,0,0) | 不影响优先级 |
💡 比较时从左到右（a→b→c→d）依次比较，直到出现差异为止。
二、计算优先级的规则
示例对比
| 选择器 | 优先级 | 说明 |
|---|---|---|
| div | (0,0,0,1) | 元素 |
| .box | (0,0,1,0) | 类 |
| #main | (0,1,0,0) | ID |
| header .menu li.active a | (0,0,3,3) | 类3 + 元素3 |
| #main .menu a:hover | (0,1,2,1) | ID1 + 类2 + 元素1 |
| style="color:red" | (1,0,0,0) | 内联样式 |
| !important | 🚨 特殊处理 | 强制最高级（除非被更高层级的同属性覆盖） |
三、!important 的特殊地位
• !important 会覆盖正常的优先级计算。 • 但仅在同一属性冲突时生效（如 color 与 color）。 • 如果多个 !important 冲突，则仍按 正常优先级 计算。
css
p { color: blue !important; }
p#main { color: red; } /* 不生效 */四、继承与层叠（Cascade）
除了优先级本身，浏览器决定样式时还会考虑以下两点：
- 继承（inheritance） 某些属性（如 color, font-size）会从父元素继承；非继承属性则不会。
- 层叠（cascade）顺序 • 后出现的样式会覆盖前面的（在同一优先级下）。 • 样式来源优先级：
- 用户定义的 !important
- 开发者定义的 !important
- 开发者样式
- 用户样式
- 浏览器默认样式（user agent stylesheet）