CSS“和”和“或”

Question

我遇到了很大的麻烦，因为我需要对某些输入类型的样式进行分析。我有类似的东西：

.registration_form_right input:not([type="radio")
{
 //Nah.
}

但我也不想设置复选框样式。

我已经尝试过：

.registration_form_right input:not([type="radio" && type="checkbox"])
.registration_form_right input:not([type="radio" && "checkbox"])
.registration_form_right input:not([type="radio") && .registration_form_right input:not(type="checkbox"])

如何使用

&&

？我很快就会需要使用

||

，我认为用法会是一样的。

更新：
我还是不知道如何正确使用

||

和

&&

。我在 W3 文档中找不到任何内容。

Answer 1

&&

通过将多个选择器串联在一起来工作，如下所示：

<div class="class1 class2"></div>

div.class1.class2
{
  /* foo */
}

另一个例子：

<input type="radio" class="class1" />

input[type="radio"].class1
{
  /* foo */
}

||

通过用逗号分隔多个选择器来工作，如下所示：

<div class="class1"></div>
<div class="class2"></div>

div.class1,
div.class2
{
  /* foo */
}

Answer 2

和（

&&

）：

.registration_form_right input:not([type="radio"]):not([type="checkbox"])

或（

||

）：

.registration_form_right input:not([type="radio"]), 
   .registration_form_right input:not([type="checkbox"])

Answer 3

要选择

a

元素的属性

b

和

X

：

X[a][b]

要选择

a

元素的属性

b

或

X

：

X[a],X[b]

Answer 4

IE 不支持

:not

伪类。我想要这样的东西：

.registration_form_right input[type="text"],
.registration_form_right input[type="password"],
.registration_form_right input[type="submit"],
.registration_form_right input[type="button"] {
  ...
}

有一些重复，但为了更高的兼容性而付出的代价很小。

Answer 5

如果我们想查找在

div

属性中同时包含 this AND that 的

value

，我们可以简单地连接这两个条件，如下所示：

div[value*="this"][value*="that"] 

如果我们想要包含

this

OR that 的 div，您可以在两个条件之间使用逗号，如下所示：

div[value*="this"], div[value*="that"] 

注意：您可以根据需要使用任意多个条件。这绝不限于示例中所示的 2 个。

Answer 6

以防万一有人像我一样陷入困境。 经过这篇文章和一些点击和试用之后 这对我有用。

input:not([type="checkbox"])input:not([type="radio"])

Answer 7

您可以使用 & 和 :not 以某种方式重现“OR”的行为。

SomeElement.SomeClass [data-statement="things are getting more complex"]  :not(:not(A):not(B))     {
    /* things aren't so complex for A or B */
}

Answer 8

我猜你讨厌编写更多选择器并用逗号分隔它们？

.registration_form_right input:not([type="radio"]),  
.registration_form_right input:not([type="checkbox"])  
{  
}

还有这个

not([type="radio" && type="checkbox"])  

在我看来更像是“不具有这两种类型的输入”:)

Answer 9

请注意。将多个

not

选择器串在一起会增加结果选择器的特异性，这使得覆盖变得更加困难：您基本上需要找到包含所有非选项的选择器并将其复制粘贴到新选择器中。

一个

not(X or Y)

选择器可以很好地避免夸大特异性，但我想我们必须坚持结合相反的东西，就像这个答案。

Answer 10

我知道这是一个非常老的问题，但由于这是我搜索结果顶部出现的问题，所以我将继续用现代 CSS 来回答它。

自 2021 年起，所有浏览器都与

:is

和

:where

伪类兼容。

:where

的特异性为 0，并且

:is

具有其最具体参数的特异性。 ¹

因此，对于OP中给定的示例，您可以执行以下任一操作：

input:not(:is([type='radio'],[type='checkbox']))
{
  /* your css declarations here */
}

或

input:not(:where([type='radio'],[type='checkbox']))
{
  /* your css declarations here */
}

---