【前言】
遇到分类栏左右两侧不同样式需求,之前用的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;}
.