如何用css:not选择器排除特定元素-css教程-PHP中文网

如何用css:not选择器排除特定元素

P粉602998670

发布： 2025-10-14 17:49:01

原创

204人浏览过

:not选择器用于选中不满足特定条件的元素，支持类、ID、标签等筛选，如p:not(.special)排除特殊类段落，可链式调用实现多条件排除，提升样式灵活性。

如何用css:not选择器排除特定元素

CSS 的 :not 选择器是一个非常实用的伪类，它允许你选中不符合指定条件的元素。通过它，你可以轻松地对一组元素应用样式，同时排除某些特定元素。

:not(选择器) 会匹配所有不满足括号内选择器条件的元素。括号里可以是标签名、类、ID、属性选择器等。

例如：

当你想对某一类元素统一设置样式，但想跳过某个特殊情况时，可以用 :not 排除这个类。

示例：

.btn:not(.btn-large) {
  padding: 10px;
  font-size: 14px;
}

登录后复制

上面的规则会给所有带有 .btn 类但没有.btn-large 类的按钮设置较小的内边距和字体大小。

你也可以排除某个具体的 ID 或标签类型。

比如：

div:not(#header) {
  background: #f0f0f0;
}

登录后复制

这会为所有 div 添加浅灰色背景，唯独跳过 id="header" 的那个 div。

绘蛙AI修图

绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色

264

再如：

:not(span) {
  color: blue;
}

登录后复制

这条规则会让非 span 元素的文字变成蓝色（注意：这种写法影响范围广，使用需谨慎）。

:not 支持链式调用，你可以连续使用多个 :not 来排除多种情况。

示例：

p:not(.intro):not(.outro) {
  opacity: 0.8;
}

登录后复制

只有既不是 .intro 也不是 .outro 的段落才会应用透明度。

基本上就这些。合理使用 :not 能让你的 CSS 更简洁灵活，关键是选对要排除的选择器。

以上就是如何用css:not选择器排除特定元素的详细内容，更多请关注php中文网其它相关文章！

大家都在看：