专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > HTML/CSS

css奇偶后人选择器

发布时间:2010-05-20 14:01:29 文章来源:www.iduyao.cn 采编人员:星星草
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;}

 

 

 

 

 

 

 

.

 

友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。

其他相似内容:

热门推荐: