[分享]css关于样式权重的说法

在CSS中，每个样式都有一个权重值，用来确定在多个样式冲突的情况下应该应用哪一个样式。样式权重是由选择器的特定性和源代码中的顺序组成的。选择器的特定性是一个用于衡量选择器优先级的值。选择器的特定性由选...

在CSS中，每个样式都有一个权重值，用来确定在多个样式冲突的情况下应该应用哪一个样式。样式权重是由选择器的特定性和源代码中的顺序组成的。

选择器的特定性是一个用于衡量选择器优先级的值。选择器的特定性由选择器中每个选择符的组合数决定。在计算特定性时，ID选择符计为100，类选择符、属性选择符和伪类计为10，元素选择符和伪元素计为1。因此，.example的特定性值为10，而p.example的特定性值为11。

当样式规则具有相同的特定性时，源代码的顺序将决定要应用哪个样式。最后定义的样式将覆盖前面的任何样式。例如，下面的样式表将导致所有p元素的颜色为蓝色：

p {
    color: red;
}
p {
    color: blue;
} 

但是，当样式规则的特定性值不同时，具有更大特定性值的样式将优先于具有较小特定性值的样式。例如，下面的样式表将导致具有类名“example”的元素的颜色为绿色，而不是蓝色：

.example {
    color: blue;
}
p.example {
    color: green;
} 

虽然样式规则中包含的选择器数量对特定性有很大影响，但是样式规则中包含的属性和值数量对权重没有影响。无论样式规则包含多少属性和值，它们都具有相同的特定性和权重。

总而言之，在编写CSS时，选择器的特定性和源代码的顺序都很重要。了解这些规则可以帮助您编写更有效、可维护的CSS。