CSS 权重：优先级规则

什么是 CSS 权重？

CSS 权重（Specificity）是浏览器用来决定哪个样式规则优先级更高的机制。当多个样式规则同时作用于同一个元素时，权重高的规则会覆盖权重低的规则。

权重的计算基于选择器的类型，通常用四组数字表示，例如 0,0,0,0。从左到右，每组数字分别代表：

1. 行内样式（如 style="color: red;"）：权重为 1,0,0,0。
2. ID 选择器（如 #myDiv）：权重为 0,1,0,0。
3. 类选择器、伪类选择器、属性选择器（如 .myClass、:hover、[type="text"]）：权重为 0,0,1,0。
4. 元素选择器、伪元素选择器（如 div、::before）：权重为 0,0,0,1。
5. 通配符和继承：权重为 0,0,0,0。

权重计算规则

1. 从左到右逐级比较：如果某一位数值相同，则比较下一位。
2. 权重相同：后出现的样式规则会覆盖前面的规则。
3. !important：优先级最高，会覆盖其他声明，但应谨慎使用。
4. 继承的样式：权重为 0，低于直接样式和通配符。
5. 复合选择器：权重叠加，但不会进位。

实战案例

案例 1：行内样式 vs ID 选择器

HTML

<div id="myDiv" style="color: red;">这是一个文本</div>

CSS

#myDiv {
    color: blue;
}

结果：行内样式的权重更高，文本颜色为 红色。

案例 2：ID 选择器 vs 类选择器

HTML

<div id="myDiv" class="myClass">这是一个文本</div>

CSS

#myDiv {
    color: blue;
}

.myClass {
    color: green;
}

结果：ID 选择器的权重更高，文本颜色为 蓝色。

案例 3：类选择器 vs 元素选择器

HTML

<p class="myClass">这是一个段落</p>

CSS

.myClass {
    color: green;
}

p {
    color: red;
}

结果：类选择器的权重更高，文本颜色为 绿色。

案例 4：复合选择器的权重叠加

HTML

<div id="myDiv">
    <p class="myClass">这是一个段落</p>
</div>

CSS

#myDiv .myClass {
    color: blue;
}

.myClass {
    color: green;
}

结果：复合选择器的权重更高，文本颜色为 蓝色。

案例 5：!important 的优先级

HTML

<div class="myClass">这是一个文本</div>

CSS

.myClass {
    color: green !important;
}

div {
    color: red;
}

结果：!important 优先级最高，文本颜色为 绿色。

案例 6：继承 vs 直接样式

HTML

<div class="parent">
    <p>这是一个段落</p>
</div>

CSS

.parent {
    color: blue;
}

p {
    color: red;
}

结果：直接样式的权重更高，文本颜色为 红色。

案例 7：通配符 vs 继承

HTML

<div class="parent">
    <p>这是一个段落</p>
</div>

CSS

* {
    color: green;
}

.parent {
    color: blue;
}

结果：通配符的权重大于继承，文本颜色为 绿色。

案例 8：就近原则（继承的优先级）

HTML

<div class="grandparent">
    <div class="parent">
        <p>这是一个段落</p>
    </div>
</div>

CSS

.grandparent {
    color: blue;
}

.parent {
    color: green;
}

结果：根据就近原则，p 会继承 .parent 的样式，文本颜色为 绿色。

总结

通过以上案例，我们可以清晰地理解 CSS 权重的计算方式和优先级规则：

1. 权重比较：从左到右逐级比较，数值大的优先级高。
2. !important：优先级最高，但应谨慎使用。
3. 继承：权重为 0，低于直接样式和通配符。
4. 就近原则：继承样式距离更近的祖先优先级更高。