blocks|key|308079|text|&&的工作原理是将多个选择器串在一起，比如-so：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|308080|<div+class="class1+class2"></div>

div.class1.class2
{
++/*+foo+*/
}|code-block|syntax|javascript|308081|另一个例子：|308082|<input+type="radio"+class="class1"+/>

input[type="radio"].class1
{
++/*+foo+*/
}|308083|%7C%7C的工作原理是用逗号分隔多个选择器，如-so：|308084|<div+class="class1"></div>
<div+class="class2"></div>

div.class1,
div.class2
{
++/*+foo+*/
}|308085|entityMap^0|0|2|0|0|0|0|0|2|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|T|$]]

<code>&amp;&amp;</code> works by stringing-together multiple selectors like-so:

<pre><code>&lt;div class="class1 class2"&gt;&lt;/div&gt;

div.class1.class2
{
 /* foo */
}
</code></pre>

Another example:

<pre><code>&lt;input type="radio" class="class1" /&gt;

input[type="radio"].class1
{
 /* foo */
}
</code></pre>

<code>||</code> works by separating multiple selectors with commas like-so:

<pre><code>&lt;div class="class1"&gt;&lt;/div&gt;
&lt;div class="class2"&gt;&lt;/div&gt;

div.class1,
div.class2
{
 /* foo */
}
</code></pre>

blocks|key|306027|text|和(&&)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|306028|.registration_form_right+input:not([type="radio"]):not([type="checkbox"])|code-block|syntax|javascript|306029|或(%7C%7C)：|306030|.registration_form_right+input:not([type="radio"]),+
+++.registration_form_right+input:not([type="checkbox"])|306031|entityMap^0|2|2|0|0|2|2|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

AND (<code>&amp;&amp;</code>):

<pre><code>.registration_form_right input:not([type="radio"]):not([type="checkbox"])
</code></pre>

OR (<code>||</code>):

<pre><code>.registration_form_right input:not([type="radio"]), 
 .registration_form_right input:not([type="checkbox"])
</code></pre>

blocks|key|3045197|text|要选择X元素的属性a和b：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3045198|X[a][b]|code-block|syntax|javascript|3045199|要选择X元素的属性a或b：|3045200|X[a],X[b]|3045201|entityMap^0|3|1|9|1|B|1|0|0|3|1|9|1|B|1|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|P|$]]

To select properties <code>a</code> AND <code>b</code> of a <code>X</code> element:

<pre><code>X[a][b]
</code></pre>

To select properties <code>a</code> OR <code>b</code> of a <code>X</code> element:

<pre><code>X[a],X[b]
</code></pre>

blocks|key|308074|text|IE不支持:not伪类。我得到了类似这样的东西：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|308075|.registration_form_right+input[type="text"],
.registration_form_right+input[type="password"],
.registration_form_right+input[type="submit"],
.registration_form_right+input[type="button"]+{
++...
}|code-block|syntax|javascript|308076|有一些复制，但对于更高的兼容性来说，这是一个很小的代价。|308077|entityMap^0|5|4|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

The <code>:not</code> pseudo-class is not supported by IE. I'd got for something like this instead:

<pre><code>.registration_form_right input[type="text"],
.registration_form_right input[type="password"],
.registration_form_right input[type="submit"],
.registration_form_right input[type="button"] {
 ...
}
</code></pre>

Some duplication there, but it's a small price to pay for higher compatibility.

blocks|key|3045173|text|以防有人像我一样被卡住了。在通过帖子和一些点击和试用后，这对我来说是有效的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3045174|input:not([type="checkbox"])input:not([type="radio"])|code-block|syntax|javascript|3045175|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Just in case if any one is stuck like me.
After going though the post and some hit and trial
this worked for me.

<pre><code>input:not([type="checkbox"])input:not([type="radio"])
</code></pre>

blocks|key|309105|text|您可以使用&+and+:not以某种方式重现"OR“的行为。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|309106|SomeElement.SomeClass+[data-statement="things+are+getting+more+complex"]++:not(:not(A):not(B))+++++{
++++/*+things+aren't+so+complex+for+A+or+B+*/
}|code-block|syntax|javascript|309107|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can somehow reproduce the behavior of "OR" using &amp; and :not.

<pre><code>SomeElement.SomeClass [data-statement="things are getting more complex"] :not(:not(A):not(B)) {
 /* things aren't so complex for A or B */
}
</code></pre>

blocks|key|3045043|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3045044|.registration_form_right+input:not([type="radio"]),++
.registration_form_right+input:not([type="checkbox"])++
{++
}|code-block|syntax|javascript|3045045|和BTW这个|3045046|not([type="radio"+&&+type="checkbox"])++|3045047|在我看来更像是“没有这两种类型的输入”:)|3045048|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|N|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|O|7|@]|8|@]|9|$D|E]]|$1|F|3|G|4|5|6|P|7|@]|8|@]|9|$]]|$1|H|3|I|4|C|6|Q|7|@]|8|@]|9|$D|E]]|$1|J|3|K|4|5|6|R|7|@]|8|@]|9|$]]|$1|L|3|-4|4|5|6|S|7|@]|8|@]|9|$]]]|M|$]]

I guess you hate to write more selectors and divide them by a comma?

<pre><code>.registration_form_right input:not([type="radio"]), 
.registration_form_right input:not([type="checkbox"]) 
{ 
}
</code></pre>

and BTW this 

<pre><code>not([type="radio" &amp;&amp; type="checkbox"]) 
</code></pre>

looks to me more like "input which does not have both these types" :)

blocks|key|3259124|text|一句忠告。将几个not选择器串在一起增加了结果选择器的特异性，这使得覆盖它变得更加困难:您基本上需要找到包含所有nots的选择器，并将其复制粘贴到新的选择器中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3259125|一个not(X+or+Y)选择器可以避免夸大特异性，但我想我们必须坚持结合对立面，就像在this+answer中一样。|3259126|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/2797109/5050045^0|8|3|0|2|B|18|B|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|H|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

A word of caution. Stringing together several <code>not</code> selectors 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.

A <code>not(X or Y)</code> selector would be great to avoid inflating specificity, but I guess we'll have to stick to combining the opposites, like in <a href="https://stackoverflow.com/a/2797109/5050045">this answer</a>.

I've got quite big trouble, because i need to anathematise from styling some input types. I had something like:

<pre><code>.registration_form_right input:not([type="radio")
{
 //Nah.
}
</code></pre>

But i don't want to style checkboxes too.

I've tried:

<pre><code>.registration_form_right input:not([type="radio" &amp;&amp; type="checkbox"])
.registration_form_right input:not([type="radio" &amp;&amp; "checkbox"])
.registration_form_right input:not([type="radio") &amp;&amp; .registration_form_right input:not(type="checkbox"])
</code></pre>

How to use <code>&amp;&amp;</code>? And I'll need to use <code>||</code> soon, and I think that usage will be same.

Update: 
I still don't know how to use <code>||</code> and <code>&amp;&amp;</code> correctly. I couldn't find anything in W3 docs.

CSS "and" and "or"

我遇到了很大的麻烦，因为我需要分析一些输入类型的样式。我有一些类似的东西：.registration_form_right input:not([type="radio"){ //Nah.}但我也不想设置复选框的样式。我试过了：.registration_form_right input:not([type="radio" && type="checkbox"]).registration_for

问CSS " and“and "or”
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS " and“and "or”EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS " and“and "or”
EN