样式选择器优先级

在CSS中，当多个选择器作用于同一个元素时，浏览器需要确定哪个样式规则具有更高的优先级。这个优先级的确定遵循一定的规则，通常称为“特异性”（Specificity）。特异性是一个权重值，用于确定哪个选择器的样式将覆盖其他选择器的样式。

特异性的计算规则

特异性是根据选择器的组成部分来计算的，通常分为四个等级（从高到低）：

1. 内联样式（在元素的style属性中定义的样式）：1,0,0,0
2. ID选择器：0,1,0,0
3. 类选择器、属性选择器、伪类：0,0,1,0
4. 元素选择器、伪元素：0,0,0,1

特异性的计算是将上述四个等级的值相加，例如：

• div（元素选择器）的特异性是0,0,0,1
• .class（类选择器）的特异性是0,0,1,0
• #id（ID选择器）的特异性是0,1,0,0
• div.class（元素选择器 + 类选择器）的特异性是0,0,1,1
• #id .class（ID选择器 + 类选择器）的特异性是0,1,1,0

特异性的比较

当比较两个选择器的特异性时，从左到右逐个等级比较，直到可以确定优先级为止。例如：

• #id（0,1,0,0）的特异性高于.class（0,0,1,0），因为ID选择器的等级高于类选择器。
• div.class（0,0,1,1）的特异性高于div（0,0,0,1），因为类选择器的等级高于元素选择器。

重要性（!important）

如果一个样式声明使用了!important，那么它的优先级将高于任何其他没有使用!important的样式声明，无论特异性如何。但是，过度使用!important会导致样式难以管理和维护，因此应谨慎使用。

源码顺序

如果两个选择器的特异性相同，那么后定义的样式将覆盖先定义的样式。这是因为CSS是“层叠样式表”，后面的样式会“层叠”在先前的样式之上。

总结

CSS选择器的优先级顺序遵循特异性规则，从高到低依次是：内联样式、ID选择器、类选择器/属性选择器/伪类、元素选择器/伪元素。如果特异性相同，则后定义的样式优先。!important可以提高样式的优先级，但应避免滥用。理解这些规则有助于编写可预测和可维护的CSS代码。