CSS如何使用:not选择器排除特定元素颜色_not伪类统一样式

:not()伪类选择器用于选中不匹配指定条件的元素，可排除类、ID、标签等；例如p:not(.highlight)将为非.highlight的段落设灰色文字，button:not(#submit-btn)使除特定ID外的按钮背景为红色，input:not([disabled])仅对未禁用输入框设置边框色，合理使用可提升样式效率与可维护性。

在CSS中，:not() 伪类选择器非常实用，它允许你选中不符合指定条件的元素。当你想为一组元素设置统一的样式，但需要排除某个特定元素时，:not() 就派上用场了。

基本语法

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

排除特定类的元素设置颜色

例如，你想让所有段落文字为灰色，但带有 .highlight 类的段落保持原有颜色：

p:not(.highlight) {
  color: gray;
}

这样，所有

元素都会变成灰色，唯独

不受影响。

排除特定ID或标签类型

你也可以排除ID或某种标签。比如，给所有按钮设置红色背景，但排除ID为 submit-btn 的按钮：

button:not(#submit-btn) {
  background-color: red;
}

或者，对所有非 的行内元素设置颜色：

*:not(span) {
  color: blue;
}

组合使用提高精确度

:not() 可以与其他选择器连用，实现更精细控制。例如，只对没有禁用状态的输入框设置边框颜色：

input:not([disabled]) {
  border-color: #007bff;
}

基本上就这些。合理使用 :not() 能减少冗余代码，让样式更清晰高效。注意不要过度嵌套或滥用，以免影响性能和可读性。