使用:not伪类可精准排除特定元素，如div>:not(p)为非段落子元素设边距，.btn:not(.disabled)避免禁用按钮交互，li:not(:first-child)添加分隔线，a:not(.nav-item,.footer-link)排除多类链接，提升样式灵活性与可维护性。
在css中，:not 伪类是一个非常实用的工具，它允许我们选择不匹配特定条件的元素。当与组合选择器结合使用时，可以实现更精确、更灵活的样式控制。下面介绍几种常见的使用技巧，帮助你更好地掌握 :not 与组合选择器的配合。
排除特定类型的子元素
当你想对某个容器内的大多数子元素应用样式，但需要排除某些特定类型时，:not 非常有用。
例如，给所有不是段落的 div 子元素添加边距：
div > *:not(p) { margin-bottom: 1rem; }
这样，div 中的 h2、ul、img 等元素都会获得下边距，而 p 元素则不会。
结合类选择器排除特定样式状态
在构建组件时，常常需要为默认状态设置样式，同时排除已添加特定类的元素。
立即学习“前端免费学习笔记（深入）”；
比如，为所有按钮添加基础样式，但跳过已标记为“disabled”的按钮：
.btn:not(.disabled) { cursor: pointer; opacity: 1; }
这能避免对禁用按钮应用交互样式，提升可访问性。
与兄弟选择器配合实现精准布局
使用 :not 可以简化相邻兄弟选择器（+ 或 ~）的逻辑判断。
例如，只在非第一个项目前添加分隔线：
li:not(:first-child)::before { content: ""; display: block; border-top: 1px solid #ddd; margin: 8px 0; }
这种方式比直接使用 li + li 更直观，语义更清晰。
嵌套组合：多条件排除
CSS 的 :not 支持传入多个选择器（用逗号分隔），实现“排除多种情况”的效果。
比如，选中所有既不是 .nav-item，也不是 .footer-link 的链接：
a:not(.nav-item, .footer-link) { color: #007cba; }
注意：不能在 :not 内使用伪元素或其他复杂嵌套，仅支持简单选择器。
基本上就这些。合理使用 :not 能减少冗余代码，让样式更具可维护性。关键是理解它与其他选择器的匹配逻辑，避免过度嵌套或性能损耗。实践中建议优先考虑语义清晰的写法，确保兼容性和可读性。不复杂但容易忽略。