:not(:hover)在嵌套列表中失效，因其仅否定当前元素的悬停状态，无法阻止子元素交互引发的父级:hover冒泡；且:hover传播受display、pointer-events等影响，浏览器处理不一致，导致规则不生效。
为什么 :not(:hover) 在嵌套列表里经常失效
因为 :not() 只过滤当前元素的状态，不控制子元素是否继承或触发。比如 ul li:not(:hover) a 想给「非 hover 的 li 下的 a」加样式，但只要鼠标移到任意 a 上，父级 li 通常也会被浏览器判定为 :hover（由于冒泡和默认行为），导致规则完全不生效。
常见错误现象：ul li:not(:hover) { opacity: 0.7; } 写了却看不出变化，不是语法错，而是 hover 状态比你想象中“宽”——它包含子元素交互引发的父级响应。
- 真正想控制的是「当前没有被悬停的 li」，但 DOM 中不存在“未被悬停”的状态伪类，
:not(:hover)只是动态否定，不是静态标记 - 嵌套层级越深，hover 传播越难预测（尤其含
display: inline或pointer-events: none的中间节点） - 某些浏览器对
:hover的冒泡处理有细微差异，导致:not(:hover)在子列表项上表现不一致
:not() 能否排除 :first-child 这类结构伪类在嵌套中的误匹配
可以，但必须明确作用域。例如，你想让「外层 ul 的第一项」有特殊样式，但不想影响「每个子 ul 的第一项」，不能只写 ul li:first-child——它会命中所有嵌套层级里的第一个 li。
正确做法是限定层级关系，用 > 子选择器配合 :not() 排除干扰：
ul > li:not(ul li) { /* 只匹配直接子 li，排除所有嵌套 li */ }
但这只是权宜之计；更可靠的是用类名隔离语义，比如给顶层列表加 class="main-nav"，再写 .main-nav > li:first-child。因为 :not() 无法否定后代关系，:not(ul li) 是非法语法（含空格=复合选择器），浏览器直接忽略整条规则。
-
:not()括号内只能是简单选择器：类名、ID、属性、伪类（如:first-child），不能含空格、>、+等关系符 - 想表达“顶层第一项”，优先用显式层级限定（
>）或语义类名，别指望:not()去“反向跳过”嵌套 - 如果必须用纯 CSS 区分，
ul:first-of-type > li:first-child比:not()更可控，前提是 DOM 结构稳定
如何安全地排除 :disabled 和 [aria-disabled="true"] 同时存在的列表项
嵌套列表中常混用原生 disabled（仅对 button/input 有效）和 ARIA 禁用（aria-disabled），而 :disabled 对 li 完全无效。所以不能只写 li:not(:disabled)，得靠属性选择器。
正确写法是链式嵌套 :not()，且注意顺序不影响逻辑但影响可读性：
li:not([aria-disabled="true"]):not([disabled]) { cursor: pointer; }
这里 [disabled] 是布尔属性，存在即生效；[aria-disabled="true"] 是字符串匹配，必须写全值。两者不互斥，可能同时出现，所以需要都排除。
- 不要写成
li:not([aria-disabled="true"], [disabled])—— 逗号在:not()里非法，整条规则静默失效 - 避免用
:not([aria-disabled])，因为aria-disabled="false"时该属性仍存在，但语义是启用，会被错误排除 - 如果列表项内含可聚焦子元素（如
button），禁用状态应由子元素承担，li本身不该设disabled属性
嵌套列表中 :not(:last-child) 的坑与替代方案
ul li:not(:last-child) 看似能给所有非末位列表项加右间距，但在嵌套结构里容易误伤：如果某个 li 内部有子 ul，而子 ul 的最后一个 li 恰好是整个文档流的末尾节点，那么父级 li 可能被意外判定为 :last-child（取决于 DOM 树解析细节）。
更稳的方式是改用位置计算型伪类，避开结构依赖：
ul li:nth-last-child(n+2) { margin-right: 12px; }
它从倒数第二项开始向前选，不关心父容器是否干净，也不受注释、文本节点或隐藏元素干扰。但要注意兼容性：IE9+ 支持，若需支持 IE8，只能靠 JS 动态加类或重构 HTML 增加 wrapper 元素。
-
:not(:last-child)依赖父元素子节点的精确构成，嵌套时 DOM 层级一乱就失效 -
:nth-last-child(n+2)是位置锚定，稳定性高，但写法稍反直觉；可读性差时建议加 CSS 注释说明意图 - 真正复杂场景（如动态增删项、混合图文节点），别硬扛 CSS，用
data-state配合 JS 控制更可靠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
