css中的:not()伪类选择器用于选中不符合特定条件的元素，能有效简化样式规则。1.基础用法：可排除特定类名如p:not(.highlight)设置非.highlight段落颜色；2.多重否定：通过嵌套实现多个排除如div:not(.red):not(.blue)设置背景色；3.属性结合：搭配属性选择器如button:not([type=”submit”])设置非提交按钮样式；4.实际应用：简化列表样式如.menu-item:not(:last-child)设置除最后一个菜单项外的右边距，提升布局灵活性。
CSS 中的 :not() 伪类选择器是一个非常实用但容易被低估的工具。它允许我们选中不符合某个条件的元素，从而简化样式规则，避免重复书写代码。
比如你想给所有不是 .active 的按钮添加一个默认样式，就可以用 :not(.active) 来实现。这种方式比写多个选择器更简洁、直观。
下面来看几个常见的使用场景和技巧。
立即学习“前端免费学习笔记（深入）”；
基础用法：排除特定类名
:not() 最常见的用途是排除具有某个类的元素。例如：
p:not(.highlight) {
color: gray;
}
上面这段代码的意思是：所有不是 .highlight 类的
标签文字颜色为灰色
。.highlight 类的段落则不受影响。
? 注意：
- :not() 只能接受一个选择器作为参数，不能写多个（比如不能写成 :not(.a, .b)）。
- 参数可以是类、属性、伪类等，比如 :not([disabled]) 或 :not(:first-child)。
多重否定？不支持，但可以嵌套
:not() 本身不支持多个条件，但你可以通过嵌套来实现“多重否定”。比如要选中既不是 .red 也不是 .blue 的元素：
div:not(.red):not(.blue) {
background: green;
}
这样写就能实现“排除 red 和 blue 类”的效果。
? 小技巧：
- 避免过度嵌套，否则会影响可读性和性能。
- 如果否定的条件太多，可能要考虑换个方式组织 HTML 结构或类名。
与属性选择器结合使用
有时候我们需要对某些属性值做排除，这时候 :not() 搭配属性选择器就很有用了。
比如想让所有不是 type=”submit” 的按钮有某种样式：
button:not([type="submit"]) {
background-color: #eee;
}
这在表单样式统一处理时特别有用，可以快速区分不同类型的按钮。
? 常见搭配还有：
- input:not([readonly])
- a:not([href^=”#”])
实际应用：简化列表样式
在写导航栏或者菜单的时候，经常会遇到“最后一个元素不需要边框”这种需求。虽然可以用 :last-child，但有时结构并不稳定。这时也可以用 :not() 来处理：
.menu-item:not(:last-child) {
margin-right: 10px;
}
这样除了最后一个菜单项外，其他都会有一个右边距。虽然看起来简单，但在响应式布局中很实用。
? 提示：如果结构会变化，建议还是优先考虑 Flex 或 Grid 的 spacing 属性，减少对选择器的依赖。
基本上就这些。:not() 看起来不复杂，但在实际项目中用好了可以少写很多冗余代码。关键是要理解它的限制和适用范围，别把它当成万能钥匙就行。
暂无评论内容