CSS选择器权重计算

导航

1. CSS特性与优先级 | QT-7274
2. 浅谈CSS中的选择器 | QT-7274

CSS选择器权重计算

通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突。

优先级

!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器

权值计算

计算方法

每个选择器，都可以计算出一组权重，格式为：(a, b, c)

• a: ID选择器的个数。
• b: 类、伪类、属性选择器的个数。
• c: 元素、伪选择器的个数

选择器	权重
ul>li	(0,0,2)
div ul>li p a span	(0,0,6)
#qt7274 .slogan	(1,1,0)
#qt7274 .slogan a	(1,1,1)

比较规则

按照 从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比，例如：

• (1,0,0) > (0,2,2)
• (1,1,0) > (1,0,3)
• (1,1,3) > (1,1,2)

图示