如何在 CSS 中正确使用 not 选择器 [重复]答案

【问题标题】：How to use the not selector correctly in CSS [duplicate]如何在 CSS 中正确使用 not 选择器 [重复]
【发布时间】：2015-12-16 04:18:42
【问题描述】：

我了解在 CSS 中使用 :not() 的基本要点，但它似乎对我不起作用。我正在尝试做类似的事情：

input[type=text][readonly]:not(.class1, .class2) {
background-color: #DDDDDD;
color: #1E1E1E;
}

但这似乎对我不起作用。每当我阅读有关此的任何信息时，它都会有input:not(.class1, .class2) { 之类的示例，但标签和:not() 部分之间没有任何内容。假设我写的语法不正确，我是否正确？如果我使用:not()，我可以不再定义标签元素吗？

【问题讨论】：

【解决方案1】：

您唯一的问题是您在 :not() 中传递了两个选择器，每个语句只使用一个。

目前扩展参数 (foo, bar) 不被任何浏览器支持。

使用

:not(.class1):not(.class2)

input[type=text][readonly]:not(.class1):not(.class2) {
  background-color: #DDDDDD;
  color: #1E1E1E;
}

<input type=text readonly class="class1">
<input type=text readonly>
<input type=text readonly class="class2">

【讨论】：

【解决方案2】：

:not 只接受简单的选择器，而不接受它们的列表。

所以你的选择器应该是这样的：

input[type=text][readonly]:not(.class1):not(.class2) {...}

【讨论】：

【解决方案3】：

结合使用：

:not(.class1):not(.class2)

:not 选择器不是函数。就像任何其他选择器接受其他选择器一样。

你的最终 CSS 应该是：

input[type=text][readonly]:not(.class1):not(.class2) {
  /* Styles */
}

片段

input[type=text][readonly]:not(.class1):not(.class2) {
  background-color: #DDDDDD;
  color: #1E1E1E;
}

<input type=text readonly class="class1">
<input type=text readonly class="class2">
<input type=text readonly>

【讨论】：