CSS选择器优先级和权重

CSS选择器

1、通配符选择器*

2、标签选择器

3、class选择器

4、id选择器

5、属性选择器

6、组合选择器,,>,+,~

7、伪类选择器

什么是权重

每一个css的选择器都有一个相对的重要程度值，也就是权重的值，简称“权值”。
css选择规则的优先级是按照css选择器的权值的比较来确定的。

优先级规则

1、css选择规则的权值不同时，权值高的优先

2、css选择规则的权值相同时，后定义的规则优先

3、css属性后面加 !important 时，无条件绝对优先

权值计算

权值 = 第一等级选择器个数，第二等级选择器个数，第三等级选择器个数，第四等级选择器个数

通用选择器（*），子选择器（>）， 相邻同胞选择器（+）等选择器权值都为 0,0,0,0

1、内联样式，权值为 1,0,0,0

2、ID选择器, 权值为 0,1,0,0

3、class ｜ 伪类 | 属性 选择器，如 .class | :hover,:link,:target | [type], 权值 0,0,1,0

4、标签 | 伪元素 选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1

当两个权值进行比较时，从高到低逐级将等级位上的权重值来进行比较的，而不是简单的总和（1000个数 + 100个数 + 10个数 + 1个数）来进行比较，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级。

选择器优先级

1、!important

2、内联样式

3、ID选择器(#id)

4、类选择器(.class) = 伪类选择器(:hover等) = 属性选择器[type等]

5、元素选择器(p等) = 伪元素选择器(:after/:before/::selection等)

6、通用选择器(*)

7、继承的样式

优先级至上而下逐级降低

样式继承

继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代