:not()伪类可精准匹配不含指定类的元素，如button:not(.active)选中无active类的按钮；支持链式排除多个类，如div:not(.disabled):not(.hidden)；可用p:not([class])匹配无class属性的元素；推荐用:not()明确样式边界，避免覆盖问题。
可以直接用 :not() 伪类配合属性选择器或类选择器，精准匹配「没有特定类名」的元素。关键不是“没类名”，而是“不包含某个类”——因为即使有其他类，只要不含目标类，就符合条件。
只给不含 .active 的按钮加默认样式
比如想让所有 显示灰色边框，但已加 class="active" 的例外（用蓝色）：
button:not(.active) {
border: 1px solid #ccc;
}
button.active {
border-color: #007bff;
}
这里 button:not(.active) 会选中：
– （无任何 class）
– （有 class，但不含 active）
– 不会选中
排除多个类名：用逗号分隔多个 :not()
如果想跳过 .disabled 和 .hidden 两类元素，可以链式写：
div:not(.disabled):not(.hidden) {
opacity: 1;
pointer-events: auto;
}
注意：
– 不能写成 div:not(.disabled, .hidden)（语法错误）
– 必须分开写两个 :not()，表示「既不含有 disabled，也不含有 hidden」
配合属性选择器，匹配「完全没有 class 属性」的元素
如果真要限定「连 class 属性都没有」（即 文本 立即学习“前端免费学习笔记（深入）”； 空 class
p:not([class]) {
font-size: 14px;
}
这个规则只作用于： 纯标签，没 class 属性
–
– 不作用于 或 （它们都有 class 属性）
实用技巧：避免样式被意外覆盖
用 :not() 替代「全量重置 + 单独覆盖」，更简洁安全：
- ❌ 不推荐：先设所有
a为蓝色，再单独写a.external { color: orange; }—— 容易漏掉组合类 - ✅ 推荐：
a:not(.external):not(.internal) { color: blue; }，明确边界，逻辑清晰 - 搭配
!important要谨慎；:not()本身已有足够 specificity，通常无需强干预
