如何在css not（）选择器中放置多个类？

Question

我想在not()选择器中堆叠多个类，但,;:不起作用。

input[type=text]:hover:not(.ui-pg-input .mandatory){ background-color: #D9EDF7;}

那么，在css not()选择器中堆栈类的正确方法是什么？

Answer 1

两种句法选择：

1. 在一个:not运算符中使用两个类：

input[type=text]:hover:not(.ui-pg-input.mandatory){background-color: #D9EDF7;}

（请注意类之间删除的空白）

1. 使用:not运算符两次：

input[type=text]:hover:not(.ui-pg-input):not(.mandatory){background-color: #D9EDF7;}

但请注意，两者都有不同的含义：第一个使用或运算符，因此它匹配所有不具有两个类的元素（因此没有或一个），而第二个使用和运算符，从而匹配没有一个或另一个类的所有元素（所以没有）。所以这取决于你想做什么......

Answer 2

您可以使用两个not()来执行此示例：

p:not(.class_one):not(.class_two){

p:not(.one):not(.two){
  color:red;
  }

<p class="one">Text</p>
<p class="two">Text</p>
<p class="three">Text</p>