“不是A而不是B”的CSS3选择器?

时间:2012-09-04 22:12:59

标签: css css3 css-selectors boolean-logic

我有这段代码,它使每个段落的类别与“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>

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

1 个答案:

答案 0 :(得分:8)

:not(.cl2):not(.cl4){ color:#ff0000; }

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

注意有differences between the :not selector in CSS3 vs jQuery - 由于收敛了CSS4规范(感谢@BoltClock)