:not()仅支持简单选择器，可排除类名、属性或伪类元素，但不支持复合选择器、多属性连写及结构关系，复杂逻辑应通过js动态标记配合css实现。
用 :not() 排除特定类名或属性的元素
:not() 的核心作用是「选中不满足条件的元素」，但它只接受简单选择器（如类名、属性、伪类），不能写复合选择器（比如 .container .item 或 div:hover）。常见误用是试图排除带多个条件的元素，结果样式完全不生效。
- ✅ 正确：
button:not(.disabled)、a:not([href^="http"])、p:not(:first-child) - ❌ 错误：
div:not(.header .nav)（复合选择器）、input:not([type="text"][required])（多属性连写不被支持） - 注意：
:not()的优先级与括号内选择器一致，li:not(.active)和.active冲突时，后者权重更高，不会被覆盖
配合属性选择器排除带特定值的元素
属性选择器是 :not() 最实用的搭档，尤其适合处理表单、链接或数据驱动的 UI。例如排除外部链接、禁用按钮、非必填字段等场景。
- 排除以
https://开头的链接：a:not([href^="https://"]) - 排除
type="hidden"的 input：input:not([type="hidden"]) - 排除
data-status="archived"的卡片：.card:not([data-status="archived"]) - ⚠️ 注意：
[href$=".pdf"]这类后缀匹配在:not()中有效，但 IE11 及更早版本不支持属性选择器嵌套在:not()中
避免嵌套 :not() 导致逻辑混乱
连续写多个 :not() 看似能叠加排除条件，实际容易写出反直觉的结果。比如 div:not(.a):not(.b) 是「既不是 .a 也不是 .b」，而 div:not(.a, .b) 在 CSS4 中才支持（目前仅 Safari 技术预览版和 Chrome 125+ 实验性支持），主流浏览器仍需分开写。
- 兼容写法（推荐）：
div:not(.a):not(.b) - 错误写法：
div:not(.a, .b)（多数浏览器解析失败，退化为整条规则失效） - 更危险的写法：
span:not(:hover):not(:focus)—— 浏览器可能因伪类动态性直接忽略整条规则 - 性能提示：含伪类的
:not()在频繁交互时可能触发重排，慎用于滚动区域内的大量元素
替代方案：当 :not() 不够用时怎么办
遇到需要排除复杂结构、兄弟关系或状态组合的情况，:not() 往往无能为力。这时候应切换思路：用更精确的选择器主动命中目标，或借助 JS 动态增删类控制样式。
立即学习“前端免费学习笔记（深入）”；
- 想排除「紧邻
.header后面的.content」？:not()无法表达相邻关系 → 改用.content:not(.header + *)不合法，正确做法是给那个特殊元素单独加类，如.content.except-after-header - 要排除「已验证且有错误提示的输入框」？CSS 无法同时判断两个独立 DOM 状态 → 由 JS 设置
data-validated="true" data-has-error="true"，再用input:not([data-validated="true"][data-has-error="true"])（注意：这仍是两个独立属性，不是连写条件） - 真正复杂的条件组合（如“有 class A 且没有 data-x”）建议交由 JS 控制类名，CSS 只负责纯样式分支
/* 示例：用 JS 辅助实现更可控的排除逻辑 */
document.querySelectorAll('input').forEach(el => {
if (el.classList.contains('required') && !el.checkValidity()) {
el.classList.add('invalid-required');
}
});
/* 对应 CSS 就简单了 */
input:not(.invalid-required) { border-color: #ccc; }:not() 很有用，但它的能力边界比看起来窄——它不处理结构关系、不支持复合选择器、对动态伪类支持脆弱。真正难搞的排除逻辑，往往得靠「主动标记」代替「被动排除」。
