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; }
.
相关推荐
lanzhusiyu 2020-07-18
覆雪蓝枫 2020-06-09
zengni 2020-04-07
momode 2020-09-11
opspider 2020-06-02
沈宫新 2020-04-30
somboy 2020-01-07
葉無聞 2019-12-30
JenniferMuMu 2018-04-20
srdwxA 2018-03-16
hfszy0 2018-03-06
LadyZhong 2019-07-01
Phoebe的学习天地 2018-07-25
沉着前进 2018-04-20