css权重如何计算

CSS权重计算方法
CSS权重通过四个等级的数值累加决定，具体规则如下：

权重等级定义
第一等（内联样式）：如 style="color:red;"，权值为 1000（不推荐使用，因难以维护）。
第二等（ID选择器）：如 #header，权值为 0100。
第三等（类/伪类/属性选择器）：如 .bar、:hover、[type="text"]，权值为 0010。
第四等（标签/伪元素选择器）：如 div、::before，权值为 0001。
通配符/子选择器等：如 *、>、+，权值为 0000（不参与计算）。
继承样式：无权值，优先级最低。
权重计算步骤
统计选择器中各等级的数量：
a = ID选择器数量
b = 类/属性/伪类选择器数量
c = 标签/伪元素选择器数量
忽略全局选择器（如 *）。
将 a、b、c 按顺序拼接成三位数（如 a=1, b=2, c=1 → 121），即为权重值。
特殊规则
!important：直接覆盖其他样式（IE6有兼容性问题）。
权重相同：遵循“就近原则”，后定义的样式生效。
示例解析
选择器 div#app.child[name="appName"] 的权重计算：
ID选择器 #app → a=1（100）
类选择器 .child + 属性选择器 [name="appName"] → b=2（20）
标签选择器 div → c=1（1）
总权重 = 100 + 20 + 1 = 121（表示为 1,2,1）。

总结：权重由选择器中各等级的数量决定，数值越大优先级越高。合理使用选择器类型可避免样式冲突。

热门标签