:not()伪类用于选中不匹配指定条件的元素,如div:not(.exclude)为不含特定类的元素设样式,常用于表单、列表、按钮等场景,支持类、ID、属性、伪类选择器,不增加特异性但括号内选择器计入权重,需注意性能与浏览器兼容性。
在CSS中,
:not()
伪类选择器
非常实用,它允许你为
不匹配特定条件的元素
应用样式。比如你想对所有
没有某个类名
的元素设置通用样式,就可以使用
:not(.exclude)
来排除这些特殊元素。
基本语法与作用
:not(选择器)
会选中
不符合括号内选择器规则的所有元素
。常用于避免重复写样式,或统一处理大多数情况下的元素,再单独处理例外。
例如:
上面的规则会作用于所有
class 不是 exclude 的 div
,而带有
class="exclude"
的 div 将被排除在外。
立即学习
“
前端免费学习笔记(深入)
”;
常见使用场景
以下是一些实际开发中常见的用法:
Comet AI 浏览器
下载 Comet AI 浏览器,体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作,让 AI 成为你的浏览副驾,大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
统一表单样式,排除特定输入框
所有输入框都带基础样式,但加了
.no-style
类的会被跳过。
列表项中排除最后一个或特定类
给每个
不是最后一个
的列表项加下边距,避免多余间距。
给非禁用按钮添加悬停效果
只对可点击按钮启用 hover 效果。
支持的选择器类型
:not()
支持多种选择器,但有一定限制:
类选择器:
:not(.exclude)
ID选择器:
:not(#special)
属性选择器
:
:not([hidden])
伪类:
:not(:first-child)
、
:not(:disabled)
不支持
伪元素
(如 ::before)或多选择器组合(早期版本限制)
现代
浏览器
支持嵌套复合选择器,例如:
注意事项
使用
:not()
时要注意以下几点:
它
不会增加选择器的特异性
(specificity),但括号内的选择器会。比如
:not(.exclude)
的权重等于一个类选择器。
过度嵌套或复杂表达式可能影响性能,尤其是在大量元素上。
确保目标浏览器支持——
:not()
在 IE8 及以下不支持,现代浏览器均良好支持。
基本上就这些。合理使用
:not(.exclude)
能让你的 CSS 更简洁、灵活,减少冗余代码。
/* 为所有不是 .exclude 类的 div 添加边框 */
div:not(.exclude) {
border: 1px solid #ccc;
}
input:not(.no-style) {
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
li:not(:last-child) {
margin-bottom: 8px;
}
button:not([disabled]) {
cursor: pointer;
transition: background 0.2s;
}
button:not([disabled]):hover {
background: #f0f0f0;
}
input:not(.ignore[type="text"]) {
background: #fff;
}
