css权重的计算规则

CSS权重决定样式优先级，以四元组(a,b,c,d)表示，a为内联样式，b为ID数，c为类/属性/伪类数，d为标签/伪元素数，从左到右逐位比较，如(0,1,0,0)>(0,0,10,0)，!important最高但慎用，继承样式权重为0，后定义覆盖前定义。

CSS 权重（Specificity）是用来决定当多个样式规则应用于同一个元素时，哪一个规则真正生效。权重由选择器的类型和数量决定，浏览器根据权重高低来选择应用哪个样式。

权重的基本组成

CSS 权重通常用一个四元组表示：(a, b, c, d)，从左到右优先级依次降低：

• a：内联样式的权重（如 style="..."），值为 1 时该项为 1，否则为 0
• b：ID 选择器的数量
• c：类选择器、属性选择器、伪类的数量
• d：标签选择器、伪元素的数量

例如：

• #header .nav li:hover → (0, 1, 2, 1)
• div#main p.highlight → (0, 1, 1, 2)
• style="color: red" → (1, 0, 0, 0)

常见选择器的权重值

• 内联样式：1000 → (1,0,0,0)
• ID 选择器（如 #id）：100 → (0,1,0,0)
• 类选择器、属性选择器、伪类（如 .class、[type="text"]、:hover）：10 → (0,0,1,0)
• 标签选择器、伪元素（如 div、::before）：1 → (0,0,0,1)
• 通配符选择器（*）、组合符（+、>、~）、否定伪类（:not() 内部的选择器才计权）：0

:not() 比较特殊 —— 它本身不增加权重，但括号内的选择器会正常计算。比如 :

立即学习“前端免费学习笔记（深入）”；

AIBox 一站式AI创作平台

AIBox365一站式AI创作平台，支持ChatGPT、GPT4、Claue3、Gemini、Midjourney等国内外大模型

217

查看详情

• .box:not(#special) → 权重是 (0,1,1,0)，因为 #special 是 ID，算 100，.box 算 10

权重比较方式

权重比较是从左到右逐位比较，类似数字大小判断：

• (0,1,0,0) > (0,0,10,0) —— 即一个 ID 胜过十个类
• (0,0,2,0) > (0,0,1,10) —— 类多的胜出

相同权重下，后出现的样式覆盖前面的（遵循层叠顺序）。

特殊情况与注意事项

• !important：会覆盖所有普通声明，不管权重多高。但应谨慎使用，破坏样式可维护性
• 继承的样式没有权重：继承来的样式优先级最低，相当于 (0,0,0,0)
• !important 的权重：单独处理，高于任何普通规则，多个 !important 则再比 specificity
• 浏览器默认样式：也有权重，可能被自定义样式覆盖，取决于具体选择器

基本上就这些。写选择器时，尽量避免靠提升权重解决问题，保持结构清晰更重要。权重算得准，冲突自然少。

以上就是css权重的计算规则的详细内容，更多请关注php中文网其它相关文章！