权重

!important > 内联样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器

选择器

表达式或示例

说明

权重

ID选择器

#aaa

100

类选择器

.aaa

10

标签选择器

h1

元素的tagName

1

属性选择器

[title]

详见这里

10

相邻选择器

selecter + selecter

拆分为两个选择器再计算

兄长选择器

selecter ~ selecter

拆分为两个选择器再计算

亲子选择器

selecter > selecter

拆分为两个选择器再计算

后代选择器

selecter selecter

拆分为两个选择器再计算

通配符选择器

*

0

各种伪类选择器

如:link, :visited, :hover, :active, :target, :root, :not等

10

各种伪元素

如::first-letter,::first-line,::after,::before,::selection

1

计算示例

  • important: 无穷大

  • 内联样式: 1000

  • ID: 100

  • 类、伪类、属性: 10

  • 元素、伪元素: 1

  • 通配符: 0

权重计算时,每遇到一个选择器就加上相应的基数,总和大的认为权重更高。如下:

style="" => 1000(一个行内样式)
#title{} => 100(一个ID选择器)
.root => 10(一个类)
[title] => 10(一个属性)
div => 1(一个元素)
*{} => 0(通配符)
div span {} => 1+1=2(两个元素)
div h1+span {} => 1+1+1=2(三个元素)
div:first-child => 1+10=11(一个元素,一个伪类)
div [title] => 1+10=11(一个元素,一个属性选择器)
body #title .root p {} => 112(1+100+10+1,两个元素,一个Id选择器,一个类)

其他总结:

  1. !important 优先级最高,但也会被权重高的important所覆盖

  2. 行内样式总会覆盖外部样式表的任何样式(除了!important)

  3. 单独使用一个选择器的时候,不能跨等级使css规则生效

  4. 如果两个权重不同的选择器作用在同一元素上,权重值高的css规则生效

  5. 如果两个相同权重的选择器作用在同一元素上:以后面出现的选择器为最后规则.

  6. 权重相同时,与元素距离近的选择器生效