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

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

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

基本语法

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

例如：

• p:not(.special) —— 选中所有不是 .special 类的段落
• input:not([disabled]) —— 选中所有未被禁用的输入框
• :not(.hidden) —— 选中所有没有 .hidden 类的元素

排除特定类的元素

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

示例：

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

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

排除特定 ID 或标签

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

比如：

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

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

再如：

:not(span) {
  color: blue;
}

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

组合多个排除条件

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

示例：

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

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

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