:not() 仅作用于当前选择器匹配的元素本身，不递归穿透后代，其内只能写简单选择器，多:not()连用为逻辑与，且权重等同于括号内选择器。
css:not() 排除指定 class 或标签时为何没生效
常见现象是写了 :not(.disabled) 却发现按钮依然被样式覆盖，或者 :not(div) 没拦住子元素里的 div。根本原因是 :not() 只作用于**当前选择器匹配的元素本身**，不递归、不穿透、不改变层级关系。
它不是“排除后代中某类元素”，而是“在本轮匹配结果里筛掉满足括号内条件的那些”。比如 button:not(.primary) 匹配的是「是 button 且没有 primary class」的元素；而 button:not(.primary) span 匹配的是「button（非 primary）下的所有 span」——:not() 约束的只是前面那个 button。
- 不能写
*:not(.ignore)试图全局排除某 class：CSS 不允许通配符与伪类混用（会报错或被忽略） -
:not()内只能放简单选择器（如.cls、[attr]、:hover），不能写.a .b或div > p - 浏览器兼容性没问题，现代浏览器都支持多参数语法
:not(.a, .b)，但 IE 完全不支持
:not() 配合属性选择器精准过滤表单控件
实际项目中常需对「非禁用、非只读、非隐藏」的输入框统一加边框或过渡效果，这时比逐个写 input:not([disabled]):not([readonly]) 更简洁的方式是直接组合：
input:not([disabled]):not([readonly]):not([type="hidden"]) {
border: 1px solid #ccc;
transition: border-color 0.2s;
}注意顺序无关，但逻辑是「同时满足所有 not 条件」。如果想表达「只要满足任一禁用状态就跳过」，就得用 :not() 套多选器（现代写法）：
立即学习“前端免费学习笔记（深入）”；
input:not(:is([disabled], [readonly], [type="hidden"])) {
/* 同上样式 */
}-
:is()是更语义化的替代方案，但老版本 Safari 需要加前缀或降级为重复:not() - 属性值带引号与否不影响匹配，但
[type=hidden]和[type="hidden"]效果一致 - 慎用
:not([value])：空 value 属性仍算存在，不会被排除
用 :not() 实现「除首尾外全部加分割线」的布局控制
列表项之间加 border-bottom 很常见，但首项和末项不该有。传统做法是先全加再单独清除，用 :not() 可一步到位：
.list-item:not(:first-child):not(:last-child) {
border-bottom: 1px solid #eee;
}这比 .list-item + .list-item 更直观，也避免嵌套结构下相邻兄弟选择器失效的问题。
-
:first-child和:last-child是结构性伪类，依赖 DOM 位置，不是 class 判断 - 若列表项中间夹杂其他元素（如注释、文本节点），
:first-child可能不指向预期元素，此时应改用:nth-of-type() - 多个
:not()连用时，浏览器按从左到右顺序计算，但最终是逻辑与关系
容易被忽略的 specificity（权重）陷阱
:not() 内的选择器会影响整个规则的优先级。例如：
.btn:not(.large) { color: red; } /* 权重 = 0,2,0 */
.btn.large { color: blue; } /* 权重 = 0,2,0 */两个规则权重相同，后声明者胜出——所以即使你写了 :not(.large)，只要 .btn.large 在后面，它仍会覆盖红色。这不是 :not() 失效，而是 CSS 优先级规则在起作用。
-
:not(.a)的权重等同于.a，即一个 class 算 10 分 -
:not([href])权重等同于属性选择器，也是 10 分 - 想压过它？要么提高外部选择器权重（如加父级
section .btn:not(.large)），要么确保顺序合理
真正灵活的控制不在于堆砌 :not()，而在于理解它筛选的是「当前选择器已匹配到的元素集合」，以及这个集合如何被后续样式规则接管。复杂场景下，配合 :is()、:where() 或 JS 动态增删 class，反而更可控。
