CSS 选择器的优先级

CSS选择器的优先级，也称为特异性（Specificity），决定了当多个样式规则应用于同一个元素时，哪个规则会生效。优先级是由四个不同的优先级层级组成的，分别是：

1. 行内样式：直接在HTML元素的style属性中定义的样式，优先级最高。
2. ID选择器：在CSS中以#id形式定义的样式。
3. 类选择器、伪类选择器：在CSS中以.class或:pseudo-class形式定义的样式。
4. 类型选择器、伪元素选择器：在CSS中以元素名称或:pseudo-element形式定义的样式。
5. 通配选择器、关系选择器：在CSS中以*或+、>等关系符号定义的样式。
6. 继承：从父元素继承的样式。
7. !important规则：在CSS中使用!important声明的样式，优先级最高，但应该谨慎使用，因为它会打破正常的优先级规则。

优先级计算规则如下：

1. 行内样式：1,0,0,0
2. ID选择器：0,1,0,0
3. 类选择器、伪类选择器：0,0,1,0
4. 类型选择器、伪元素选择器：0,0,0,1
5. 通配选择器、关系选择器：0,0,0,0

当计算两个或多个选择器的优先级时，会将它们的值相加，数值大的选择器优先级更高。

如果有多个选择器具有相同的优先级，那么：

• 最后定义的规则将会生效（在CSS中后定义的规则会覆盖先定义的规则）。
• 如果有**!important**规则，则具有!important的规则会覆盖没有!important的规则。