CSS not()排除指定元素，灵活控制其他元素

CSS 的 `:not()` 伪类并非万能排除工具，而是一个精准作用于当前选择器匹配元素本身的筛选器——它不穿透后代、不改变层级、不支持复杂选择器，其本质是在已匹配的元素集合中剔除满足括号条件的个体；理解这一点，才能避开 `.disabled` 未生效、子 `div` 被误拦、权重冲突覆盖等常见陷阱，并善用多 `:not()` 组合、`:is()` 替代、结构性伪类协同等技巧，真正实现简洁、可靠且符合预期的样式控制。

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，反而更可控。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS not()排除指定元素，灵活控制其他元素》文章吧，也可关注golang学习网公众号了解相关技术文章。