行内样式优先级最高，但!important可覆盖它；css优先级按(a,b,c,d)权值逐位比较，相同权值时后声明生效；滥用!important和id选择器暴露结构与命名问题。
行内样式比所有 CSS 选择器优先级都高
直接写在 style 属性里的样式，比如
，会覆盖任何外部样式表、
块或 @import 引入的规则，无论选择器多复杂（哪怕用 !important 也要看位置和声明顺序）。
CSS 选择器优先级怎么算：内联 > ID > 类/属性/伪类 > 标签/伪元素
浏览器按“权值”计算优先级，不是简单数个数。标准算法是四位数比较（a,b,c,d），从左到右逐位比：
-
a：内联样式存在则为 1，否则为 0（即style属性） -
b：ID 选择器个数（如#header） -
c：类名（.btn）、属性选择器（[type="submit"]）、伪类（:hover）个数之和 -
d：标签名（div）、伪元素（::before）个数之和
例如：#nav .item:hover 是 (0,1,2,0)，而 div#nav ul li.active 是 (0,1,1,3) —— 前者胜出，因为 c=2 > c=1。
!important 不是万能解药，它只作用于单条声明且会破坏可维护性
!important 的优先级高于行内样式，但仅限于它所在的那一条 CSS 声明；而且它不改变选择器本身的权值，只是把该声明“提权”到最高层。滥用会导致调试困难、覆盖失控。
立即学习“前端免费学习笔记（深入）”；
常见误用场景：
- 多个
!important同时出现，最终生效取决于源码顺序（后声明覆盖前声明） - 在行内样式里无法写
!important（html 的style属性不支持） - 用 js 动态设置
element.style.color = 'red !important'无效，浏览器会忽略!important
/* 这样写是合法的 */ .warning { color: orange !important; } /* 但这样写不会生效 */ 实际开发中真正该关注的是结构与命名，而不是死磕优先级
靠堆 ID 或加 !important 解决样式冲突，往往说明 HTML 结构嵌套过深、CSS 类职责不清。BEM、CSS Modules 或原子化方案（如 Tailwind）的设计初衷，就是让样式作用域更明确、权值更扁平。
容易被忽略的一点：相同权值下，后写的样式才生效——这比记忆优先级公式更常影响结果。尤其是多人协作时，引入第三方 CSS 或动态插入样式，顺序错一点就白调半天。