样式未生效主因是选择器权重不足，应通过提升精准度（如父容器限定、属性选择器）解决，而非滥用!important；权重按a（内联）、b（ID）、c（类/伪类）、d（元素）四元组逐位比较，相同则后定义者胜。
看被划掉的样式和specificity值
样式写了但没反应，八成不是写错了，而是被更高权重的选择器覆盖了——浏览器在 DevTools 的 Styles 面板里用删除线标出的，就是失败者。鼠标悬停在带删除线的声明上，会显示 specificity is lower than another rule，并附带一个四元组（如 0,1,1,0）。
这个四元组不能加总，必须逐位比较：
— 第一位（a）：内联样式数量，基本为 0
— 第二位（b）：ID 选择器个数，#header 算 1，它一出现，你写十个类也赢不了
— 第三位（c）：类 / 属性 / 伪类个数，.btn、[disabled]、:hover 各算 1
— 第四位（d）：标签 / 伪元素个数，div、::before 各算 1
常见误判：
— .card .title（c=2）输给 .modal .header h2（c=2, d=1 → 总权重更高）
— article ul li a（d=4）远低于 #user-list .item（b=1 → 权重 100）
— :not(.active) 的权重等同于 .active，别以为它“弱”
优先用精准选择器，而不是堆类名或!important
盲目加 .container .list .item .btn 不仅语义混乱，还容易让后续维护踩坑。真正该做的是让选择器更准、更可控：
立即学习“前端免费学习笔记（深入）”；
- 改用子选择器：
.dialog > .footer比.dialog .footer更明确，权重不变但匹配更稳 - 启用 BEM 命名：
.card__title--large替代无意义嵌套，权重稳定且可预测 - 用属性选择器兜底：
[data-role="tooltip"]权重 =0,0,1,0，和类持平，但几乎不会被第三方样式意外覆盖 - 避免空格后代选择器滥用：确认 DOM 结构真有那么深的嵌套，否则
.user-card .name很可能只是想表达“卡片里的名字”，直接.user-card-name更干净
Vite 或 Vue/React 中 CSS Modules 的优先级怎么调？
CSS Modules 会给类名自动加哈希后缀（如 .btn_abc123），但它不改变选择器原始权重。所以全局的 .btn（c=1）依然能压过模块内的 .btn（c=1）——因为两者权重相同，而全局样式通常加载更早或位置更靠前。
提升局部样式权重的有效方式：
- 双重类名写法（SCSS）：
.btn { &.btn { color: red; } }—— 实际生成.btn.btn_abc123，权重升为 c=2 - 绑定父容器：
.card { .title { font-size: 20px; } }→ 生成类似.card_abc .title_def456，权重翻倍 - 慎用
!important：只在必须覆盖第三方库（如 Ant Design 的.ant-btn）时临时加，且要带空格：color: #ff4d4f !important;
注意：:where() 和 :is() 可用于降低第三方选择器权重，比如把 .ant-modal .header h1 改成 :where(.ant-modal) :where(.header) h1，后者不参与 specificity 计算。
为什么:hover或:disabled写出来就是不生效？
这不是优先级问题，是浏览器直接跳过整条规则——伪类组合违反逻辑时，CSS 引擎根本不尝试匹配。
典型失效场景：
-
a:visited:hover：静态状态（已访问）和动态状态（悬停）无法共存，恒假，整条规则被丢弃 -
button:disabled:hover：禁用元素无法触发:hover，条件矛盾，规则无效 -
:not(:disabled:hover)：语法非法，:not()内只能接单一简单选择器
正确做法：
— 把状态拆开写：button:disabled { opacity: 0.5; } + button:hover { background: #eee; }
— 多状态排除用嵌套 :not()：input:not(:disabled):not(:read-only):focus
— 调试时用 DevTools 的 Force element state 功能验证是否真能触发，而不是猜
真正容易被忽略的点：父元素设了 pointer-events: none，子元素所有伪类（包括 :hover）都会静默失效，连 DevTools 强制都救不回来——得先查父链。
