css奇偶后人选择器

   阅读
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;}

 

 

 

 

 

 

 

.

 

阅读