css奇偶后代选择器

【前言】

      遇到分类栏左右两侧不同样式需求，之前用的php判断。现在介绍个更为简单的方法，css后代选择器，除此外还可以通过jquery添加类名来实现

 

【主体】

（1）css后代选择器

    ①奇数选择器：

 

ul li:nth-child(2n+1){color:red}

    ②偶数选择器

 

 

ul li:nth-child(2n){color:black}

 

（2）jQuery添加类名

 

var itemList = $('ul li');
for(var i = 0;i<itemList.length;i++){
       if(i%2 == 0){
          $(itemList[i]).find('.port').addClass('red-color');//奇数
      }else{
          $(itemList[i]).find('.port').addClass('black-color');//偶数
      }
}

   然后在css里添加类

 

.red-color{color:red;}
.black-color{color:black;}

 

（3）拓展

除了奇偶外，还可以实现类似标签云的颜色指定

.plinks li:nth-child(2n+0){
    background: #EB6841;
}
.plinks li:nth-child(2n+1){
    background: #20a8fe;
}
.plinks li:nth-child(2n+2){
    background: #FE4365;
}
.plinks li:nth-child(2n+3){
    background: #EDC951;
}
.plinks li:nth-child(2n+4){
    background-color: #5cb85c;
}
.plinks li:nth-child(2n+5){
    background-color: #b433ff;
}
.plinks li:nth-child(2n+6){
    background-color: #567e95;
}
.plinks li:nth-child(2n+7){
    background-color: #f60;

}
.plinks li:nth-child(2n+8){
    background-color: #d9534f;
}
.plinks li:nth-child(2n+8){
    background-color: #d9214f;
}

 

 

 

 

 

 

 

.