CSS“和”和“或”答案

【问题标题】：CSS "and" and "or"CSS“和”和“或”
【发布时间】：2011-02-17 07:59:32
【问题描述】：

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

.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 文档中找不到任何内容。

【问题讨论】：

"anathematise" 哎呀。你想用天谴来威胁那些试图设计复选框的人吗？（您的意思可能是“豁免”或类似的意思，例如，“我需要从样式规则中豁免某些输入类型。”）
嗯，我找不到从我的语言翻译成短语动词的好方法；)
我认为@T.J.克劳德大概明白这一点。但这很很有趣……尤其是他拼错“神”的讽刺意味=D
Great ngram，不过。 ;^)

标签： css css-selectors conditional-operator

【解决方案1】：

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

not(X or Y) 选择器可以很好地避免夸大特异性，但我想我们必须坚持结合对立面，就像在 this answer 中一样。

【讨论】：

【解决方案2】：

&& 将多个选择器串在一起工作，如下所示：

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

【讨论】：

好的，感谢您的光临。我讨厌造型形式，但这是我的任务，而网站不是我的。我会将类应用于输入。
这是 Internet Explorer 支持的有用图表：msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#selectors
not 似乎可以从 IE9 开始工作（感谢@geofflee 提供的图表）。
2018 年我们真的还关心支持旧版本的 IE 吗？甚至微软都没有。
同意。自发布此答案以来已经 8 年了。我已经删除了关于 :not() 选择器的过时指南。

【解决方案3】：

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

X[a][b]

要选择X 元素的属性a 或b：

X[a],X[b]

【讨论】：

【解决方案4】：

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

【讨论】：

抱歉，:not(:not) 不是有效的 CSS 语法。不过它适用于 jQuery。

【解决方案5】：

以防万一有人像我一样被卡住。经过帖子和一些打击和试验之后这对我有用。

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

【讨论】：

为我工作。非常感谢你。这个答案拯救了我的一天：）

【解决方案6】：

我猜你不喜欢编写更多的选择器并用逗号分隔它们？

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

顺便说一句

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

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

【讨论】：

那行不通，因为第一个选择器会选择所有非radio，（但会选择checkbox），第二个会选择逆转。两者的联合将包含checkbox 和 radio。
第一个示例不会 && 将它们放在一起，它会为第一个选择器的非无线电输入和不是复选框的输入触发，这意味着所有输入:-)
你错了。然后，第一个将应用于第二个，第二个将应用于第一个。

【解决方案7】：

AND (&&)：

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

或（||）：

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

【讨论】：

不，也失败了。它将适用于 1 到 2 和 2 到 1
@KennyTM：看。使用逗号将执行以下操作： .registration_form_right input:not([type="radio"]) 将适用于包括复选框在内的所有内容，而 .registration_form_right input:not([type="checkbox"]) 将适用于所有内容，包括收音机
@Misiur：当然。第二个是“OR”（又名||）案例。更新澄清。
@KennyTM：Misiur 想说的是……你的“||”这个例子在语法上是正确的，但是如果你简化表达式，它就变成了“.registration_form_right input”，因为两个选择器的并集包含了所有的输入。
@geo, @Mis：看，问题问“我需要使用||很快”，所以这是一种构造||的方法的例子。当然简化后变成.registration_form_right input，但本质是你把,当作||使用。您可以使用input:not([type="radio"]), input:not([name="foo"]) 作为一个重要的示例。

【解决方案8】：

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

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

【讨论】：