id 选择器优先级永远高于 class，因 CSS 权重规则中 id=100、class=10；inline-style 权重最高（1000），层叠顺序取决于权重与声明位置而非加载顺序。
class 和 id 同时出现，谁赢？
id 的优先级永远高于 class，哪怕你写了 100 个 class，也压不过 1 个 id。这不是浏览器“偏好”，而是 css 选择器权重计算的硬规则：id 算 100，class 算 10，标签名算 1。
常见错误现象：#header .nav li a 被 .nav-item.active 覆盖不了——因为前者含 #header，总权重至少 100+10+1+1 = 112；后者只有 10+10 = 20。
- 别靠堆 class 数量来“抢”样式，无效
- 用浏览器开发者工具看 computed 样式，右键「Reveal in Elements Panel」后点「Styles」标签，找带删除线的属性，上面会标出被哪条规则覆盖
- 如果真要临时提权，
!important是最后手段，但会破坏可维护性，尤其在组件化项目里容易引发连锁覆盖
inline-style、<style>、外部 CSS 文件，谁先加载谁生效？
加载顺序无关紧要，生效顺序只取决于**层叠上下文 + 优先级 + 出现位置**。外部 CSS 可能写在 <head> 最前，但只要 inline-style 在元素上，它就赢。
使用场景：React/Vue 组件里动态加 style={{ color: 'red' }}，本质就是 inline-style，天然比任何外部 class 高一级。
- inline-style 权重 = 1000（最高）
-
<style>块内规则和外部 CSS 文件权重相同，后出现的同权重规则会覆盖前面的 - 注意：CSS @import 是异步加载，可能造成 FOUC 或意外交互，别在
<style>里用它来“控制顺序”
伪类 :hover 和 :active 为什么有时不生效？
不是优先级不够，是它们被更高权重的静态规则锁死了。比如你写了 a { color: blue; }，又写 a:hover { color: red; }，但某处又有一条 .nav-link { color: green !important; }，那 hover 就永远触发不了。
立即学习“前端免费学习笔记（深入）”；
性能影响：过度嵌套伪类选择器（如 .menu > ul > li:first-child > a:hover）不会卡顿，但会让权重飙升，后续极难覆盖。
- 检查开发者工具里 hover 状态下该属性是否被划掉，以及划掉原因
- 伪类本身不增加权重，
a:hover和a同权重（都是 1），但.link:hover是 10+1 = 11 - 移动端要注意
:active在 ios safari 上默认延迟 300ms，得加touch-action: manipulation或用 js 模拟
flex/Grid 容器里的子项样式被“吃掉”了？
不是优先级问题，是 display 层级接管了部分样式解释权。比如给 flex 子项设 vertical-align: middle，完全无效——flex 项不参与表格布局，这个属性被忽略。
兼容性影响：IE11 对 flex: 1 解析不稳定，有时会把 flex: 1 1 auto 当成 flex: 1 0 auto，导致收缩行为异常。
- Flex 子项的
margin、width、height仍有效，但Float、clear、vertical-align失效 - Grid 中
align-self和justify-self会覆盖容器级的align-items/justify-items，但前提是子项没被其他高权重规则锁死 - 调试时先关掉父容器的
display: flex或grid，看样式是否恢复，就能快速定位是不是布局模型干扰
事情说清了就结束。真正难的不是算权重，是当多个框架（比如 Tailwind + 自定义 CSS + 第三方组件库）混用时，!important 和高权重选择器像野草一样长出来，查一条样式得翻三层源码。