使用 .class:not(.exclude) 可精准选中含某类但不含特定类的元素；排除多个类需链式书写如 .item:not(.disabled):not(.hidden)，不可用逗号合并；:not() 内仅支持简单选择器，不提升权重且实时响应 class 变化。
用 .class:not(.exclude) 就能选中具有某个类但不包含特定类的元素，关键在于 :not() 里写的是要排除的完整类名，不是部分匹配。
基础写法：排除单个 class
比如想选中所有带 btn 类、但不带 disabled 类的按钮：
.btn:not(.disabled) { color: blue; }
这样只有 <button class="btn"></button> 和 <button class="btn primary"></button> 会生效，而 <button class="btn disabled"></button> 不会匹配。
立即学习“前端免费学习笔记（深入）”；
排除多个 class：用逗号分隔
如果要同时排除 disabled 和 hidden 两类，可以这样写：
.item:not(.disabled):not(.hidden) { opacity: 1; }
注意：:not(.disabled, .hidden) 是**无效语法**，CSS 不支持 :not() 里用逗号写多个选择器（这是 CSS4 提案，尚未被广泛支持）。必须链式书写多个 :not()。
结合其他条件：提高精准度
有时需要更严格的筛选，比如只对某父容器下的特定类做排除：
form .input:not(.readonly):not(.error) { border-color: #ccc; }
这个规则只作用于 form 内部、有 input 类、且既没有 readonly 也没有 error 的元素。顺序和嵌套关系会影响结果，建议先限定范围再加 :not() 过滤。
注意事项与常见坑
-
:not()里面只能写简单选择器（如类名、属性选择器、伪类），不能写复合选择器（如.a .b或div.btn） - 排除多个 class 时，务必分开写
:not(.a):not(.b)，不要合并 - 如果目标元素有内联样式或更高优先级规则，
:not()本身不会提升权重，该覆盖还是会被覆盖 - 动态增删 class 时，样式会实时响应 —— 这是
:not()的优势，适合配合 JS 控制状态
