:not(.a, .b)会静默失效，因css selectors level 3规定:not()仅支持单个简单选择器，逗号分隔属语法错误，浏览器直接丢弃整条规则；正确写法是:not(.a):not(.b)。

为什么:not(.a, .b)会静默失效

浏览器遇到 :not(.a, .b) 会直接丢弃整条 CSS 规则，DevTools 里整行被划掉并标“Invalid CSS”。这不是没效果，是压根不解析——CSS Selectors Level 3 明确规定 :not() 只能接受单个简单选择器，逗号分隔属于多个选择器，语法非法。Chrome、Firefox、Safari（截至 2026 年 10 月）全部不支持，Safari 尤其严格。

正确写法只能是:not(.a):not(.b)

这是目前唯一兼容、可靠、语义清晰的方案，逻辑为 AND（既不匹配 .a，也不匹配 .b）：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• button:not(.primary):not(.disabled) → 排除所有带 .primary 或 .disabled 的 button
• 顺序无关：:not(.disabled):not(.primary) 效果完全一致
• 如果元素同时有 .primary 和 .disabled，照样被排除——这是预期行为
• 特异性（specificity）等于外部选择器 + 每个 :not() 内部选择器之和，不会因链式而“变强”

混合类名与状态时要注意什么

你可以把类名、属性选择器、伪类混用，但必须各自独立、合法：

• input:not([type="hidden"]):not(:disabled):not(.ignore) ✅ 合法且常用
• :disabled 只对原生表单控件（input、button、select）生效，对 div[disabled] 无效
• :read-only 和 [readonly] 不等价：JS 设 el.readOnly = true 触发前者，但不自动添加 readonly 属性
• 属性值匹配要精确：[data-status="draft"] 是精确匹配，[data-status~="draft"] 才匹配空格分隔的单词

真正难的不是怎么写，而是该不该用

当要排除的类超过 3–4 个（比如 :not(.a):not(.b):not(.c):not(.d)），选择器会变得冗长、难读、难维护。此时更推荐反向建模：

• 给可作用的元素加正向类名，如 .btn--enabled，直接写 .btn--enabled
• 用 BEM 等命名约定让意图明确，避免靠否定逻辑推导样式边界
• :not() 不看祖先、不响应 JS 动态 class 切换（除非重排），它只检查 DOM 当前是否存在那个类——这点最容易被忽略

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！