CSS【详解】样式优先级（含提升优先级的方法、样式的层叠、数值计算法等）

不同样式的优先级

由高到低依次是：

5级—— !important

.foo { color: #fff !important; }

!important 是顶级优先级，可重置 JavaScript 设置的样式，通常不推荐使用。

4级——style 内联样式

3级——ID 选择器

2级—— 类选择器、属性选择器和伪类

1级——标签选择器

0级——通配选择器 *、逻辑组合伪类，如 :not()、:is() 和 :where 等

优先级最低 —— 继承的样式

尽量保持较低的优先级，以便使用更高优先级的选择器重置样式。

样式的层叠

同一元素的同一样式值被定义多次时，写在后面的样式会覆盖写在前面的样式，即 样式的层叠

因页面中的样式有以下三种来源：

写在 html 标签的 style 属性中的内嵌样式内嵌的样式表 scoped，即页面中 标签内的样式外链的样式表 @import，如 标签中链接的 css 文件

样式表中的样式都是通过 CSS 选择器进行定义的，而 style 样式的优先级高于 CSS 选择器，所以这三种来源的样式中，style 样式的优先级最高。

而外链的样式表比内嵌的样式表先加载，即内嵌的样式表中的样式在外链的样式表的样式的后面，所以若外链的样式表和内嵌的样式表存在相同的样式定义，内嵌的样式会覆盖外链的样式。

/* src/views/test.css */

.msg {

color: green;

}

p {

color: green;

}

所以，可简单理解为：

行内样式 style > 内嵌样式表 scoped > 外部样式表 @import

CSS选择器的优先级算法 ---- 数值计算法

每一段CSS语句的选择器都对应一个具体的数值，最终算出的数值越大优先级越高。

一个1级选择器（标签选择器），优先级数值+1；

一个2级选择器（类选择器、属性选择器和伪类），优先级数值+10；

一个3级选择器（ID选择器），优先级数值+100。

选择器

计算值

计算细则

* {}

0

1个0级通配选择器，优先级数值为0

dialog {}

1

1个1级标签选择器，优先级数值为1

ul > li {}

2

2个1级标签选择器，1个0级选择符，优先级数值为1+0+1

li > ol + ol {}

3

3个1级标签选择器，2个0级选择符，优先级数值为1+0+1+0+1

.foo {}

10

1个2级类名选择器，优先级数值为10

a:not([rel=nofollow]) {}

11

1个1级标签选择器，1个0级否定伪类，1个2级属性选择器，优先级数值为1+0+10

a:hover {}

11

1个1级标签选择器，1个2级伪类，优先级数值为1+10

ol li.foo {}

12

1个2级类名选择器，2个1级标签选择器，1个0级空格选择符，优先级数值为1+0+1+10

li.foo.bar {}

21

2个2级类名选择器，1个1级标签选择器，优先级数值为10×2+1

#foo {}

100

1个3级ID选择器，优先级数值为100

#foo .bar p {}

111

1个3级ID选择器，1个2级类名选择器，1个1级标签选择器，优先级数值为100+10+11

实战范例

当css如下时，1和2都是深蓝色，因为两个后代选择器优先级相同，深蓝色的样式在后，会覆盖之前的样式。

.lightblue p { color: lightblue; }

.darkblue p { color: darkblue; }

或

:not(.darkblue) p { color: lightblue; }

.darkblue p { color: darkblue; }

但当css如下时，1和2都是浅蓝色，因为.lightblue.lightblue p的优先级更高。

.lightblue.lightblue p { color: lightblue; }

.darkblue p { color: darkblue; }

一些特殊的优先级

元素的最终宽度会同时满足「不小于 min-width」和「不大于 max-width」，当两者冲突时，min-width 的优先级更高。

提升优先级的方法

重复选择器自身（不了解的人可能以为是写错了）

.foo.foo {}

添加属性选择器【推荐】

.foo[class] {}

#foo[id] {}

使用!important【不推荐】

.foo { color: #fff !important; }

自测题

最终页面效果是？

答案

解析

/* css 权重 101 */ /* 影响内容 100 200 300*/

#container p { color: blue; }

/* css 权重 101 */ /* 影响内容 100 200 */

div #p1, div #p2 { color: red; }

/* css 权重 111 */ /* 影响内容 100 */

#container p.yellow-text { color: yellow; font-weight: bold; }

/* css 权重 12 */ /* 影响内容 200 */

div p.green-text { color: green; font-weight: bold; }

/* css 权重 2 */ /* 影响内容 100 200 300*/

div p { color: gray; }

影响100的样式有

/* css 权重 101 */ /* 影响内容 100 200 300*/

#container p { color: blue; }

/* css 权重 101 */ /* 影响内容 100 200 */

div #p1, div #p2 { color: red; }

/* css 权重 111 */ /* 影响内容 100 */

#container p.yellow-text { color: yellow; font-weight: bold; }

/* css 权重 2 */ /* 影响内容 100 200 300*/

div p { color: gray; }

最高权重为

/* css 权重 111 */ /* 影响内容 100 */

#container p.yellow-text { color: yellow; font-weight: bold; }

所以 100 是黄色

影响200的样式有

/* css 权重 101 */ /* 影响内容 100 200 300*/

#container p { color: blue; }

/* css 权重 101 */ /* 影响内容 100 200 */

div #p1, div #p2 { color: red; }

/* css 权重 12 */ /* 影响内容 200 */

div p.green-text { color: green; font-weight: bold; }

/* css 权重 2 */ /* 影响内容 100 200 300*/

div p { color: gray; }

最高权重为

/* css 权重 101 */ /* 影响内容 100 200 300*/

#container p { color: blue; }

/* css 权重 101 */ /* 影响内容 100 200 */

div #p1, div #p2 { color: red; }

权重相同时，写在后面的样式会覆盖前面的，所以最终 200 的颜色是红色

影响300的样式有

/* css 权重 101 */ /* 影响内容 100 200 300*/

#container p { color: blue; }

/* css 权重 2 */ /* 影响内容 100 200 300*/

div p { color: gray; }

最高权重为

/* css 权重 101 */ /* 影响内容 100 200 300*/

#container p { color: blue; }

所以300的颜色是蓝色