CSS“和”和“或”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2797091/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS "and" and "or"
提问by Misiur
I've got quite big trouble, because i need to anathematise from styling some input types. I had something like:
我遇到了很大的麻烦，因为我需要对某些输入类型进行样式设置。我有这样的事情：
.registration_form_right input:not([type="radio")
{
//Nah.
}
But i don't want to style checkboxes too.
但我也不想样式复选框。
I've tried:
我试过了：
.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"])
How to use &&? And I'll need to use ||soon, and I think that usage will be same.
如何使用&&？而且我很快就需要使用||，我认为用法是一样的。
Update:
I still don't know how to use ||and &&correctly. I couldn't find anything in W3 docs.
更新：
我还是不知道如何使用||和&&正确。我在 W3 文档中找不到任何内容。
回答by geofflee
&&works by stringing-together multiple selectors like-so:
&&通过将多个选择器串在一起来工作，如下所示：
<div class="class1 class2"></div>
div.class1.class2
{
/* foo */
}
Another example:
另一个例子：
<input type="radio" class="class1" />
input[type="radio"].class1
{
/* foo */
}
||works by separating multiple selectors with commas like-so:
||通过像这样用逗号分隔多个选择器来工作：
<div class="class1"></div>
<div class="class2"></div>
div.class1,
div.class2
{
/* foo */
}
回答by kennytm
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"])
回答by waao
To select properties aAND bof a Xelement:
要选择性质a和bA的X元素：
X[a][b]
To select properties aOR bof a Xelement:
要选择的属性a或b一个的X元素：
X[a],X[b]
回答by Max Shawabkeh
The :notpseudo-class is not supported by IE. I'd got for something like this instead:
该: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"] {
...
}
Some duplication there, but it's a small price to pay for higher compatibility.
那里有一些重复，但为更高的兼容性付出的代价很小。
回答by Serge Profafilecebook
You can somehow reproduce the behavior of "OR" using & and :not.
您可以使用 & 和 :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 */
}
回答by Jaroslav Záruba
I guess you hate to write more selectors and divide them by a comma?
我猜你讨厌写更多的选择器并用逗号分隔它们？
.registration_form_right input:not([type="radio"]),
.registration_form_right input:not([type="checkbox"])
{
}
and BTW this
顺便说一句
not([type="radio" && type="checkbox"])
looks to me more like "input which does not have both these types" :)
在我看来更像是“没有这两种类型的输入”:)
回答by Andrius R.
A word of caution. Stringing together several notselectors increases the specificity of the resulting selector, which makes it harder to override: you'll basically need to find the selector with all the nots and copy-paste it into your new selector.
一句小心的话。将几个not选择器串在一起会增加结果选择器的特异性，这使得它更难覆盖：您基本上需要找到带有所有 nots 的选择器并将其复制粘贴到新的选择器中。
A not(X or Y)selector would be great to avoid inflating specificity, but I guess we'll have to stick to combining the opposites, like in this answer.
一个not(X or Y)选择将是巨大的，以避免夸大特异性，但是我想我们必须坚守在结合对立的，像这样的回答。
回答by Aurish
Just in case if any one is stuck like me. After going though the post and some hit and trial this worked for me.
以防万一有人像我一样被卡住。经过帖子和一些点击和试用后，这对我有用。
input:not([type="checkbox"])input:not([type="radio"])
