:hover不生效主因是pointer-events:none或a标签缺href；:not()不支持后代选择器嵌套；属性值含空格须加引号；::before/::after必须声明content；选择器匹配依赖DOM结构而非语义。
为什么 .nav li a:hover 有时不生效
不是选择器写错了，而是层叠顺序或伪类触发条件没满足。最常见的是父元素设置了 pointer-events: none，或者 a 标签没有可交互的 href 属性（纯 文本 在部分浏览器下 hover 不触发）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查
:hover状态是否被强制禁用（看 Computed 面板里pointer-events值） - 确保
a有合法href，哪怕只是href="#"或href="javascript:void(0)" - 避免在
:hover上直接覆盖color而忽略text-decoration，否则下划线残留会显得样式“没生效”
:not() 嵌套和兼容性雷区
:not() 本身不支持复杂选择器嵌套（比如 :not(.foo .bar) 是非法语法），只接受简单选择器（类名、属性、伪类等）。Chrome 105+ 和 Firefox 100+ 支持 :not(:is(...)) 曲线救国，但 IE 完全不认 :not() 的多参数写法。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 写
:not(.disabled):not(.hidden)没问题，但别写:not(.menu ul li) - 需要排除后代关系时，改用
:is()包一层：:not(:is(.sidebar .btn)) - 旧项目要兼容 IE，就别用
:not()，改用显式添加类如.btn-enabled
属性选择器里的引号和空格陷阱
[data-role="main"] 和 [data-role=main] 表现一致，但一旦值含空格或特殊字符（比如 data-id="item-1 active"），不加引号就会解析失败。更隐蔽的是，[class~="btn"] 匹配空格分隔的单词，而 [class*="btn"] 是子串匹配——后者可能误中 button。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有属性值含空格、连字符、点号时，必须加双引号：
[data-value="user name"] - 匹配 class 列表中的独立词，优先用
[class~="btn"]而非[class*="btn"] - 避免用
[style]做选择——内联样式不可靠，且无法响应 CSS-in-JS 的动态变更
伪元素 ::before 和 ::after 的 content 必须项
没有 content 声明，::before/::after 就不会渲染，哪怕写了 display: block 或 width/height。而且 content: "" 和 content: " " 效果不同：前者是空字符串（无占位），后者是空格（有宽度）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只要用了
::before或::after，第一行必须是content，哪怕只是content: "" - 需要撑开高度时，别只靠
height，配合content: ""+display: block才可靠 - 图标字体场景下，
content: "\e901"必须用双引号包裹 Unicode，单引号在某些构建工具里会出错
.card .title 可能因为中间插了 shadow-root 或 scoped 样式隔离就完全失效，这时候翻 DOM 结构比调选择器更重要。 
