:not()本身不隐藏元素，需配合display: none等样式；常见误用是用它做排除式可见性控制，正确做法是先全局隐藏再显式显示目标元素。
用 :not() 隐藏元素？先明确一点：它本身不隐藏
:not() 是一个条件过滤伪类，作用是「选中不匹配某选择器的元素」，不是显示控制指令。想靠它直接隐藏元素，必须配合 display: none 或其他隐藏手段。常见误解是写成 :not(.skip) { display: none; }——这实际会隐藏所有「不带 .skip 类」的元素，和直觉相反。
:not() 的典型误用场景与修正方式
比如想隐藏除 .main 外的所有 section，错误写法：
section:not(.main) { display: none; }
这看似合理，但若页面还有 section 没加类、或类名拼错，它们全被隐藏。更危险的是嵌套结构中，父级被隐藏后子元素的 :not() 仍会计算（但不可见）。应优先考虑显式声明：
- 用
section { display: none; }先全局隐藏，再用section.main { display: block; }单独显示目标 - 避免在复杂 DOM 层级中依赖
:not()做「排除式可见性控制」，CSS 优先级和继承会让行为难以预测 -
:not()不支持伪元素（如:not(::before)）和部分伪类组合（如:not(:hover:active)），浏览器会直接忽略整条规则
真正适合 :not() 的隐藏相关用途
它更适合「规避干扰」而非「主控显示」。例如：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
立即学习“前端免费学习笔记（深入）”；
- 给非禁用按钮加 hover 效果：
button:not([disabled]) { cursor: pointer; } - 排除特定状态下的过渡动画：
input:not([readonly]) { transition: border-color 0.2s; } - 在表单验证中只对非已校验字段应用样式：
input:not([data-validated="true"]) { border: 1px solid #ccc; }
这些用法不改变可见性，但能防止样式污染，逻辑更健壮。
兼容性与现代替代建议
:not() 在现代浏览器中支持良好（Chrome 1+, Firefox 1+, Safari 3.1+），但注意早期版本只接受简单选择器（如不能写 :not(div p)）。如果目标环境需兼容 IE8 及更早版本，必须放弃 :not()，改用显式类控制或 JS 动态添加/移除类。
另外，CSS 逻辑组合能力增强后，:is() 和 :where() 更适合多条件匹配，而隐藏逻辑本身，始终推荐用「默认隐藏 + 显式显示」的双步策略，比依赖否定逻辑更可控。
