【技术专题】CSS3 网页技术 - CSS3 优先级

大家好，我是Java1234_小锋老师，最近更新《一天学会 CSS3 视频教程(无废话版) 》专辑，感谢大家支持。

本课程主要介绍和讲解 CSS3简介，CSS3 入门，CSS3 选择器与优先级，CSS3 单位、颜色、字体与文本，CSS3 盒模型与基础样式，CSS3 布局基础，CSS3 布局进阶，CSS3 视觉增强，CSS3 变换与动画，CSS3 函数与变量，CSS3 响应式与移动端适配，CSS3 工程化与最佳实践。

视频教程+课件+源码打包下载：

链接：https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd=1234

提取码：1234

CSS3（在第二阶段目录里）

CSS3 优先级

CSS 优先级通常指层叠中的特异性（specificity）：当多个规则匹配同一个元素时，决定哪个声明生效。完整判断顺序是：

来源与重要性 → 特异性 → 书写顺序

1. 先看来源和重要性

从低到高大致为：

用户代理普通样式（浏览器默认）
用户普通样式
作者普通样式（我们写的 CSS）
CSS 动画
作者 !important
用户 !important
用户代理 !important
CSS 过渡 transition

同来源、同重要性下，才比较特异性。

如果特异性也相同，后定义的覆盖先定义的。

内联样式属于作者样式，但普通内联样式优先于所有作者普通选择器。

!important 可以覆盖普通内联样式；用户 !important 甚至可以覆盖作者 !important。

2. 特异性计算

常用四元组表示：

text

复制代码

(a, b, c, d)

a：行内样式，通常是 0 或 1
b：ID 选择器数量
c：类、属性选择器、伪类数量
d：元素选择器、伪元素数量

比较时从左到右，不进位 。例如 (1,0,0,0) 大于 (0,99,99,99)。

常见权重：

选择器	特异性
`style=""`	`(1,0,0,0)`
`#id`	`(0,1,0,0)`
`.class`、`[type="text"]`、`:hover`	`(0,0,1,0)`
`div`、`p`、`::before`	`(0,0,0,1)`
`*`、`>`、`+`、`~`、空格	`(0,0,0,0)`

例如：

复制代码

div#app .item:hover { }

div：元素 → 1
#app：ID → 1
.item：类 → 1
:hover：伪类 → 1

所以特异性是 (0,1,2,1)。

3. 特殊选择器

:not(X)、:is(X)、:has(X)：本身不额外增加，取参数中最高特异性 。
- :is(#id, .class) → (0,1,0,0)
- :not(.a, #b) → (0,1,0,0)
:where(X)：特异性永远为 (0,0,0,0)，包括参数。
:nth-child(An+B of S)：伪类本身算一个类，再加上 S 中最高特异性。
- :nth-child(2 of .item) → (0,0,2,0)

4. 注意点

优先级不是 1000/100/10/1 的十进制进位。
11 个类也打不过 1 个 ID。
!important 不是选择器优先级，而是改变层叠重要性，应慎用。
继承来的样式没有特异性，任何直接匹配的规则都能覆盖它。
同优先级时，后写的覆盖先写的。
现代 CSS 中还有 @layer：层叠层会先按层顺序比较，再在层内比较特异性。普通声明中未分层样式优先于分层样式；!important 时层顺序反转。

一句话总结：

先比来源和 !important，再比行内/ID/类/元素，最后比先后顺序。