:not()伪类用于选中不满足特定条件的元素,提升样式精确性。例如p:not(.special)选中非.special类的段落,input:not([disabled])选中未禁用的输入框;可链式排除多种情况如.user-item:not(.admin):not(.guest),但不支持逗号分隔多选择器;常用于避免重复覆盖样式,增强代码可维护性。

CSS 中的 :not() 伪类选择器是一个非常实用的工具,它允许你为**不匹配某个条件的元素**应用样式。使用它可以避免为特定元素重复写覆盖样式,提升代码简洁性和可维护性。
基本语法与作用
:not(选择器) 会选中所有不满足括号内选择器条件的元素。括号中可以是标签名、类、ID、属性选择器等。
常见用法示例:-
p:not(.special)—— 选中所有不是 .special 类的段落 -
input:not([disabled])—— 选中所有未被禁用的输入框 -
:not(.hidden)—— 选中所有没有 .hidden 类的元素
排除特定类或状态的元素
当你想对一组元素统一设置样式,但希望跳过某些特殊情况时,:not() 非常有用。
例如:为所有按钮添加外边距,但排除“提交”按钮button:not(.submit) {
margin-right: 10px;
}
这样 .submit 类的按钮就不会有右边距,其他按钮都会应用该样式。
立即学习“前端免费学习笔记(深入)”;
结合属性选择器排除特定情况
你可以用 :not() 排除具有特定属性的元素,比如链接中非外部链接的样式处理。
a:not([href*="http"]) {
text-decoration: underline;
}
这个规则会让所有 href 不包含 "http" 的链接(即站内链接)显示下划线,而外部链接不受影响。
链式使用多个 :not() 条件
可以通过连续使用 :not() 来排除多种情况。
例如:选中既不是 .admin 也不是 .guest 的用户项.user-item:not(.admin):not(.guest) {
opacity: 0.8;
}
注意:不能写成 :not(.admin, .guest),因为 :not() 不支持逗号分隔的多重选择器(目前仅接受单个参数)。
基本上就这些。合理使用 :not() 能让你的 CSS 更加精准和灵活,特别是在构建组件样式时,能有效减少冗余代码。关键是理解它匹配的是“不符合条件”的元素,逻辑上取反即可。










