CSS“ and”和“ or”

小开

我猜你讨厌写更多的选择符，然后用逗号除以它们？

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

顺便说一句

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

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

小开

和(&&) :

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

或(||) :

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

小开

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"] {
...
}

虽然存在一些副本，但是为了获得更高的兼容性，这只是一个很小的代价。

小开

最佳答案

&&的工作原理是将多个选择器串联在一起，如下所示:

<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 */
}

小开

以防有人像我一样被困住。在经历了一些打击和审判之后这招对我很管用。

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

小开

您可以以某种方式使用 & 和: 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 */
}

小开

要选择 X元素的属性 a和 b:

X[a][b]

选择 X元素的属性 a或 b:

X[a],X[b]

小开

提醒一句。将几个 not选择器串联在一起可以增加最终选择器的特异性，这使得覆盖它变得更加困难: 你基本上需要找到带有所有不的选择器并将其复制粘贴到新的选择器中。

一个 not(X or Y)选择器将是伟大的，以避免膨胀的特异性，但我想我们必须坚持相反的组合，就像在这个答案。

小开

如果我们想要寻找一个在 value属性中同时包含这个还有那个的 div，我们可以简单地将两个条件连接起来，如下所示:

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

如果我们想要包含这个或者那个的 div，可以在两个条件之间使用逗号，如下所示:

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

注意 : 您可以使用任意多的条件。这并不限于2，如示例所示。