CSS中的“and”和“or”

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 文档中找不到任何相关信息。

- Misiur

---

"anathematise" 噫！你想以神的惩罚来威胁那些试图为复选框设置样式的人吗？（你可能是想说“排除”或类似的词，例如：“我需要从样式规则中排除某些输入类型。”） - T.J. Crowder

嗯，我找不到一个好的短语动词翻译来自我的语言 ;) - Misiur

我认为 @T.J. Crowder 可能已经理解了。但这太有趣了......特别是他拼错 "divine" 这个词的讽刺意味 =D - David Thomas

很棒的ngram，不过；^) - ruffin

可能是重复问题 https://dev59.com/dGct5IYBdhLWcg3wHJ3F - S.aad

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

- geofflee

---

好的，谢谢提醒。我很讨厌给表单添加样式，但这是我的任务，而且这个网站不是我的。我会给输入框应用类别。 - Misiur

这是一个有用的图表，展示了Internet Explorer支持的内容：http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#selectors - geofflee

“not” 从 IE9 开始似乎无法工作（感谢 @geofflee 提供的图表）。 - SharpC

在2018年，我们真的还需要关注支持旧版本的IE吗？即使微软也不这么做。 - Anomaly

同意。自此回答发布以来已经8年了。我已经删除了有关:not()选择器的过时指导。 - geofflee

Answer 2

AND (&&):

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

OR (||):

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

- kennytm

---

不行，也失败了。它会将1应用于2和2应用于1。 - Misiur

@KennyTM：看这里。使用逗号会产生以下效果：.registration_form_right input:not([type="radio"]) 将应用于所有包括复选框的元素，而 .registration_form_right input:not([type="checkbox"]) 将应用于所有包括单选框的元素。 - Misiur

@Misiur: 当然。第二个是针对“或”（又称||）的情况。已更新以澄清。 - kennytm

@KennyTM：Misiur 的意思是……你的“||”示例在语法上是正确的，但如果你简化表达式，它就变成了“.registration_form_right input”，因为这两个选择器的并集包括所有输入。 - geofflee

@geo，@Mis：看，这个问题问到了“我很快就需要使用||”，因此这是构建||的示例之一。当然，在简化后它会变成.registration_form_right input，但本质上是*你使用,作为||*。您可以使用input:not([type="radio"]), input:not([name="foo"])进行非平凡示例。 - kennytm

Answer 3

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

X[a][b]

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

X[a],X[b]

- waao

---

以上的答案正是我所需要的，谢谢。例如：<input type="input" name="is_it_still_happening" value="no"><style>input[name="is_it_still_happening"][value="no"] { border: solid 2px red}</style> - undefined

Answer 4

:not 伪类不受 IE 支持。我建议使用以下方法代替：

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

有一些重复，但为了更高的兼容性，这是一个小代价。

- Max Shawabkeh

Answer 5

如果我们想查找一个包含this和that在它们的value属性中的div，我们可以简单地连接两个条件，如下所示：

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

如果我们想要包含this OR that的

，可以在两个条件之间使用逗号，如下所示：

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

注意：您可以使用尽可能多的条件。这并不像示例中显示的那样仅限于2个条件。

- questioning

Answer 6

如果有人像我一样遇到问题，可以试试以下方法。 在阅读帖子并进行一些尝试后， 这个方法对我有效。

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

- Aurish

---

对我很有效。非常感谢你，这个答案救了我的一天 :) - Sandeep Amarnath

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

- Serge Profafilecebook

---

抱歉，":not(:not)" 不是有效的 CSS 语法。不过在 jQuery 中可以使用它。 - Serge Profafilecebook

Answer 8

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

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

顺便说一下，这个

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

我看起来更像是“没有这两种类型的输入” ：）

- Jaroslav Záruba

---

这样做行不通，因为第一个选择器会选中所有非 radio 元素（包括 checkbox），第二个选择器则相反。两个选择器的并集将包含 checkbox 和 radio 两种元素。 - Eric

第一个示例不会将它们连接在一起，它将针对第一个选择器中不是单选按钮的输入以及不是复选框的输入触发，这意味着所有输入 :-) - Dan F

你错了。然后，第一个将应用于第二个，第二个将应用于第一个。 - Misiur

Answer 9

非常老的问题，我知道，但既然这是我搜索结果中排在前面的内容，我就来回答一下，使用现代的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 */
}

---

- Vopel

Answer 10

警告：连续使用多个not选择器会增加结果选择器的特异性，使其更难被覆盖。你基本上需要找到带有所有not的选择器并将其复制粘贴到新选择器中。

not(X或Y)选择器可以避免特异性膨胀，但我想我们必须坚持组合相反的选择器，就像this answer中所述。

- Andrius R.