css造型使用：nth-​​child和：not [英] css styling using the :nth-child and :not

问题描述

我有一个 div 的列表，我想使用nth-child选择器来设置样式。我还希望能够排除 div ，如果它有一个特定类，例如：

 < style> 
 .a：not（.b）：nth-​​child（2n）{
 color：hotpink; 
} 
< / style> 
 
< div class =a>测试< / div> 
< div class =a b>测试< / div> 
< div class =a>我应该是粉红色的，因为我是第二个孩子，没有一个b类< / div> 
< div class =a>测试< / div> 
< div class =a>测试< / div> 
< div class =a>测试< / div> 
< div class =a>测试< / div> 
< div class =a>测试< / div> 
< div class =a>测试< / div> 
  

http://jsfiddle.net/BF7GY/

解决方案

我认为最好的方法是使用jQuery和两个filter（）调用：

  $（'。a'）。filter return $（this）.hasClass（'b'）; 
}）filter（
 function（i）{
 return（i + 1）％2 == 0; 
} 
）.css（'color'，'hotpink'）; 
  

：not和：nth-​​child没有我们想要的那么灵活>

I have a list of divs that I want to style using the nth-child selector. I also want to be able to exclude a div if it has a certain class, i.e:

<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/

解决方案

I think the best way would be to use jQuery and two filter() calls like:

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

:not and :nth-child are not as flexible as we would like (unfortunately)

这篇关于css造型使用：nth-​​child和：not的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！