CSS优先级计算中内联样式与!important谁更高？-css教程-PHP中文网

内联样式（style属性）优先级最高，权值为1000，强制覆盖外部CSS中带!important的规则；唯一能覆盖它的!important必须写在style属性内，如style="color:red!important"。

css优先级计算中内联样式与!important谁更高？

内联样式优先级高于带 !important 的普通 CSS 规则，但 !important 可以压过内联样式——前提是它也出现在内联样式里。

内联样式为什么总赢过外部 CSS 里的 `!important`

浏览器计算优先级时，先按「来源类型」分档：style 属性属于最高档位（作者样式中的“内联”子档），而或 .css 文件属于低一档的“作者样式（非内联）”。!important 只能翻倍它自己所在档位的权重，无法越级覆盖更高来源的声明。

常见错误现象：div { color: red !important; } 完全无效，如果目标元素是

。
内联样式的权重是 (1, 0, 0, 0)，不依赖选择器，天生满格

!important 在外部 CSS 中只是把原本的 (0, 0, 1, 0) 拉到 (0, 0, 1, 0) + important，仍卡在非内联档位
真正能覆盖内联样式的 !important，必须写在 style 属性里，比如 style="color: red !important;"


怎么判断当前颜色到底被谁控制？
别猜，直接看 Chrome DevTools 的 Elements 面板：被划掉的属性说明被更高优先级覆盖；没划掉但没生效，大概率是 JS 动态写了 element.style.color = "xxx"。

											
												
												
													CSS婚礼策划服务机构宣传网站模板
													CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
												
												下载
												
											
										

检查 Computed 标签页里的 color 值，点开右侧小箭头，能看到所有参与计算的来源及是否被覆盖
注意区分「继承来的 color」——它权重为 0，任意显式声明都能盖掉，哪怕只是 p { color: inherit; }

如果看到 style="" 是空的，但元素仍有内联色，说明 JS 清过 element.style.cssText 后又重设了某几项


!important 在内联样式中怎么写才有效？
语法上允许，但极少用。它只对内联样式自身起作用，且仅当存在多个内联声明冲突时才有意义（比如 JS 多次赋值）。

合法写法：

无效写法： + 外部 p { color: blue !important; } → 蓝色不会生效
更现实的场景：某些 UI 库或编辑器会输出带 !important 的内联样式，此时想覆盖它，只能靠更高来源（如浏览器扩展注入的 CSS）或直接操作 element.style 对象

真正难缠的不是 !important 本身，而是它常掩盖了 JS 直接改 style 属性这个事实——查不到规则，就去查运行时的 element.style 对象。