如何使用CSS:not排除多个类名和状态-css教程-PHP中文网

:not(.a, .b) 会静默失效，因为 css 规范（截至 2026 年）仅允许 :not() 接收单个简单选择器，逗号分隔写法非法，浏览器直接忽略整条规则；唯一可靠写法是 :not(.a):not(.b)，表示“既不匹配 .a 也不匹配 .b”。

如何使用css:not排除多个类名和状态

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

浏览器直接忽略整条 CSS 规则，DevTools 里整行被划掉并标“Invalid CSS”。这不是“没效果”，是压根不解析——因为 CSS 规范（截至 2026 年）仍只允许 :not() 接收单个简单选择器。逗号分隔、空格、后代关系、伪元素、复合类（如 .a.b）全属非法。Safari ≤15.4 甚至对 Level 4 的多参数语法 :not(.a, .b) 也静默丢弃，别依赖。

`:not(.a):not(.b)` 是唯一可靠写法

它表示“既不匹配 .a，也不匹配 .b”——逻辑是 AND，不是 OR。只要元素带其中任一 class，就会被排除。

✅ 正确：button:not(.primary):not(.disabled) → 排除所有含 .primary 或 .disabled 的 button
❌ 错误：button:not(.primary, .disabled) → 整条规则失效
⚠️ 注意：如果元素同时有 .primary 和 .disabled，照样被排除；但若只缺一个，比如只有 .primary 没 .disabled，它仍被排除——这是预期行为，不是 bug

混合类名与状态时的顺序和兼容性

状态伪类（如 :disabled、:checked）和属性选择器（如 [type="submit"]）可与类名混用，但顺序影响可读性，不影响逻辑结果。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

推荐把更具体、更易变的条件放前面：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"] 匹配空格分隔值

真正难的不是写法，而是该不该用

当排除逻辑变复杂（比如“排除同时有 A 和 B 的元素”，或“排除某父容器下的子元素”），:not() 就力不从心了：

:not() 无法否定后代关系，div:not(.sidebar p) 合法性为零
想跳过 .sidebar 下的 p？正向限定作用域更稳：main p、article p，或层叠覆盖：p { background: #f0f0f0; } + .sidebar p { background: transparent; }
动态 DOM 变更（如 JS 新增 class）在旧引擎中可能不触发重绘，:not() 不是响应式开关
优先级等于外部选择器 + 内部选择器权重之和，div:not(.special) 是 (0,1,1)，比 .special（0,1,0）还高——它赢不是因为“排除”，是因为权重高