Question

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

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

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

，我是否可以不再定义标记元素？

Answer 1

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

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

使用

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

https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anot

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">

Answer 2

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

所以你的选择器应该如下：

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

Answer 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>

如何在CSS中正确使用not选择器

3 个答案: