"不是A而不是B"的CSS3选择器?

Tal*_*les 4 css boolean-logic css-selectors css3

我有这个代码,使每个段与类不同于" cl2"红色.

<head>
<style type="text/css">
p{ color:#000000; }
:not(.cl2){ color:#ff0000; }
</style>
</head>
<body>
<p class="cl1">This is a paragraph.</p>
<p class="cl2">This is second paragraph.</p>
<p class="cl2">This is third paragraph.</p>
<p class="cl3">This is fourth paragraph.</p>
<p class="cl2">This is fifth paragraph.</p>
<p class="cl2">This is sixth paragraph.</p>
<p class="cl4">This is seventh paragraph.</p>
<p class="cl5">This is eigth paragraph.</p>
<p class="cl1">This is nineth paragraph.</p>
</body>
Run Code Online (Sandbox Code Playgroud)

如何扩展我的:not选择器以忽略例如类" cl2"AND" cl4"?我嘲笑::not(.cl2, .cl4){ color:#ff0000; }但它不起作用.

Rob*_*low 8

:not(.cl2):not(.cl4){ color:#ff0000; }
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/nottrobin/WFwtP/

注意CSS3中:not选择器与jQuery 之间存在差异 - 由于CSS4规范中的收敛(感谢@BoltClock)

  • 你必须这样做的原因是因为`:not(.cl2,.cl4)`在CSS3中无效,但是它在jQuery中是有效的,并且建议用于CSS4.参见[this question](http://stackoverflow.com/questions/10711730/whats-the-difference-in-the-not-selector-between-jquery-and-css). (3认同)