html - 使用 :nth-child 和 :not 的 CSS 样式

Question

我有一个div要使用 nth-child 选择器设置样式的 s 列表。我还希望能够排除 adiv如果它有某个类，即：

<style>
 .a:not(.b):nth-child(2n) {
    color: hotpink;
 }
</style>

<div class="a"> Test </div>
<div class="a b"> Test </div>
<div class="a"> I should be pink, as i am the 2nd child that doesnt have a "b" class </div>
<div class="a"> Test </div>
<div class="a"> Test </div>
<div class="a"> Test </div>
<div class="a"> Test </div>
<div class="a"> Test </div>
<div class="a"> Test </div>

http://jsfiddle.net/BF7GY/

Answer 1

我认为最好的方法是使用 jQuery 和两个 filter() 调用，例如：

$('.a').filter(function(){
        return !$(this).hasClass('b');
     }).filter(
    function(i){
        return (i+1)%2 == 0; 
    }
).css('color','hotpink');

:not 和 :nth-child 没有我们想要的那么灵活（不幸的是）