css样式优先级CSS 样式权重由以下因素决定：选择器权重；来源优先级；代码顺序（就近原则）； CSS 选择器的权重通

1. 选择器优先级（Specificity）

CSS 选择器的权重通过一个数字系统计算，规则如下：

权重值：

计算方法： 将选择器中的权重累加，形成一个数字。例如：

#container .box div { /* 100 (ID) + 10 (类) + 1 (元素) = 111 */
    color: blue;
}
.box div { /* 10 (类) + 1 (元素) = 11 */
    color: red;
}

结果：color: blue 优先，因为权重 111 > 11。

组合选择器： 选择器越具体，权重越高。例如，#id .class（110）比 .class（10）权重高。多个相同类型选择器会累加，如 .class1.class2（10 + 10 = 20）。

样式来源也会影响权重，从高到低依次为：

!important 的作用：

!important 会显著提升样式优先级，覆盖其他规则，除非遇到更高来源的 !important。示例：

.box {
    color: red !important; /* 优先于内联样式 */
}

html
<div class="box" style="color: blue;">文本</div>

结果：文本颜色为 red，因为 !important 优先级高于内联样式（1000）。

当选择器权重和样式来源相同时，浏览器会选择最后定义的规则。这通常被称为“就近原则”。

示例：

.box {
    color: blue; /* 权重 10 */
}
.box {
    color: red;  /* 权重 10，但后定义，优先应用 */
}

结果：color: red。

外部样式表 vs 内联样式： 外部 CSS 文件中，靠后的规则覆盖靠前的规则。内联样式（style 属性）默认权重 1000，通常优先于外部样式，除非外部样式使用 !important。

你之前提到 Normalize.css，它属于用户代理样式的标准化，优先级最低（低于作者样式）。如果你的自定义样式与 Normalize.css 冲突，自定义样式会覆盖 Normalize.css 的规则。

层叠冲突解决： 检查选择器权重。检查是否使用了 !important。确认代码顺序，调整规则位置。

<div id="container" class="box" style="color: green;">测试文本</div>

#container {
    color: blue; /* 权重 100 */
}
.box {
    color: red !important; /* 权重 10 + !important */
}
div {
    color: black; /* 权重 1 */
}

结果：文本颜色为 red，因为：

.box 的 !important 提升了优先级，覆盖内联样式（color: green, 1000）。 #container（100）和 div（1）权重低于 !important。

CSS 样式权重由以下因素决定：