:not()不支持嵌套:matches()或:is()，因其仅接受简单选择器，故:not(:matches(.a,.b))非法，应改用:not(.a):not(.b)或div:matches(.card,.panel):not(.hidden)等扁平结构。
为什么 :not(:matches(...)) 会失效或行为异常
根本原因在于 CSS 选择器的优先级和否定逻辑限制：:not() 只接受「简单选择器」（如 .cls、[attr]、div），而 :matches() 是一个伪类函数，属于「复杂选择器」。因此 :not(:matches(.a, .b)) 在规范中是非法语法，主流浏览器（Chrome/Firefox/Safari）均会直接忽略整条规则。
- 实际写法
:not(.a):not(.b)才是等效且合法的替代方案 -
:matches()内部可嵌套任意简单选择器，但一旦放进:not()就触发语法错误 - 开发者工具中看到该规则被划掉（strikethrough），即表示解析失败
:not() 与多个 :matches() 并列使用的场景
虽然不能嵌套，但可以将 :matches() 作为独立条件与其他选择器并列使用，再用 :not() 排除其中一部分——关键在于结构扁平化。
- 想选「是按钮或链接，但不是禁用状态」：写成
button:matches(:enabled), a:matches(:not([disabled]))不行，因为a没有disabled属性；正确写法是button:enabled, a:not([href=""]) - 更安全的模式：先用
:matches()定义目标集合，再对每个子项单独加:not()，例如div:matches(.card, .panel):not(.hidden)✅ 合法 —— 这里:not(.hidden)作用于整个匹配结果，而非:matches()内部 - 注意兼容性：
:matches()在旧版 Safari 需用:any()前缀（已废弃），生产环境建议用 Autoprefixer 或避免依赖
用 :is() 替代 :matches() 的必要性
:is() 是 :matches() 的标准化名称（CSS Selectors Level 4），两者功能完全一致，但 :is() 支持在 :not() 外层组合，且浏览器支持更稳定（Chrome 105+、Firefox 103+、Safari 15.4+）。
-
:not(:is(.a, .b))仍是非法的 —— 规范未放宽:not()的参数限制，这点没变 - 但
:is()自身容错更强：内部无效选择器（如:is(.a, div:hover::before)）会被静默忽略，而:matches()在部分旧引擎中可能直接导致整条规则失效 - 真实项目中应统一用
:is()，并配合构建工具自动降级（如 PostCSS 插件转换为多条独立规则）
/* 推荐写法：语义清晰 + 兼容可控 */
.cta-button:is(.primary, .secondary):not(.disabled) {
opacity: 1;
}
.cta-button:is(.primary, .secondary).disabled {
opacity: 0.4;
}真正需要嵌套否定逻辑时的务实解法
当业务逻辑确实要求「匹配 A 或 B，但排除 C 和 D」这类复合条件时，CSS 原生无法一步到位，必须拆解或换思路。
立即学习“前端免费学习笔记（深入）”；
- 最可靠方式：添加语义化 class，例如把「需要高亮但不处于编辑态的卡片」标记为
class="card highlight active"，再用.card.highlight:not(.editing) - 用属性选择器辅助：
[data-role="button"]:not([data-state="disabled"])比依赖伪类更可控 - JavaScript 补位：动态增删 class 比维护超长选择器更易读，尤其涉及状态交叉（如「加载中且校验失败」）
- 注意性能：过度使用
:is()+:not()组合可能导致样式计算变慢，特别是匹配大量节点时（如表格行）
真正难处理的不是语法组合，而是把业务中的「非此即彼」「亦此亦彼」逻辑强行塞进 CSS 选择器树——这时候 class 管理和状态建模往往比技巧更重要。
