CSS“ and”和“ or”

113

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

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

css css-selectors conditional-operator

— Misiur
source

17

“麻醉” Yikes。您想威胁那些试图用迪瓦恩报应风格设置复选框的人吗？（您可能表示“豁免”或类似的意思，例如，“我需要从样式规则中豁免某些输入类型。”）

— TJ Crowder 2010年

3

好吧，我找不到从我的语言到短语动词的良好翻译；）

— Misiur，2010年

4

我认为@TJ Crowder可能理解这一点。但它是 = d有趣......他的拼写错误“神圣”的特别具有讽刺意味的

— 大卫说起用莫妮卡

很好，但是。; ^）

— ruffin

141

&& 通过像这样将多个选择器串在一起来工作：

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

— 土工
source

1

好的，谢谢你。我讨厌样式表单，但这是我的任务，而且网站不是我的。我将类应用于输入。

— Misiur

5

这是Internet Explorer支持的有用图表：msdn.microsoft.com/en-us/library/cc351024

— VS.85).aspx#selectors

12

谁现在使用IE ：）

— 塔伦（Tarun）2013年

2

not似乎可以从IE9开始使用（由于@geofflee提供的图表）。

— SharpC

1

我们是否真的仍然关心在2018年支持IE的较早版本？甚至微软都没有。

— 异常，

48

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"])

— 肯尼
source

不，也要失败。它将适用于1比2和2比1

— Misiur，2010年

@KennyTM：看。使用逗号将执行以下操作：.registration_form_right input：not（[type =“ radio”]）将适用于包括复选框在内的所有内容，.registration_form_right input：not（[type =“ radio”]）将适用于所有内容，包括电台

— Misiur，2010年

@Misiur：当然。第二个是针对“ OR”（又名||）的情况。更新以澄清。

— kennytm 2010年

1

@KennyTM：Misiur想要说的是……您的“ ||” 该示例在语法上是正确的，但是如果简化表达式，则它变为“ .registration_form_right输入”，因为两个选择器的并集包括所有输入。

— geofflee，2010年

@ geo，@ Mis：看，这个问题问“我很快就要使用||”，所以这是||从示例中构造出一个方法。当然，它会.registration_form_right input在简化后变为，但本质是您使用,as||。您可以使用input:not([type="radio"]), input:not([name="foo"])一个简单的例子。

— kennytm 2010年

16

要选择性质a和bA的X元素：

X[a][b]

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

X[a],X[b]

— 瓦ao
source

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）
source

2

您可以使用＆和：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
source

2

抱歉，：not（：not）不是有效的CSS语法。它可以与jQuery一起使用。

— Serge Profafilecebook 2014年

1

我想您讨厌编写更多的选择器，并用逗号将它们分开？

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

顺便说一句

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

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

— 雅罗斯拉夫·扎鲁巴（JaroslavZáruba）
source

2

那是行不通的，因为第一个选择器将选择所有non- radio（但将选择checkbox），而第二个选择器将相反。两者的checkbox 并集将包含和radio。

— 艾瑞克（Eric）

第一个示例不会&&将它们放在一起，将为第一个选择器不是单选的输入，非复选框的AND输入触发，这意味着所有输入：-)

— Dan F 2010年

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

— Misiur

1

以防万一有人像我一样被卡住。经过职位和一些打击和审判后，这对我有用。

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

— 极光
source

1

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

一个not(X or Y)选择将是巨大的，以避免夸大特异性，但是我想我们必须坚守在结合对立的，像这样的回答。

— 安德里斯·R。
source