当前位置:  开发笔记 > 编程语言 > 正文

列表项的备用背景颜色

如何解决《列表项的备用背景颜色》经验,为你挑选了3个好方法。



1> Adam C..:

一些可爱的CSS3怎么样?

li { background: green; }
li:nth-child(odd) { background: red; }



2> Phil.Wheeler..:

如果你想纯粹用CSS做这个,你就有了一个你分配给每个备用列表项的类.例如


如果您的列表是动态生成的,则此任务将更加容易.

如果您不希望每次都必须手动更新此内容,则可以使用jQuery库并将样式交替应用于

  • 列表中的每个项目:

    
    

    你的jQuery代码:

    $(document).ready(function(){
      $('#myList li:nth-child(odd)').addClass('alternate');
    });
    



    3> Chris Van Op..:

    您可以通过向每个列表项添加交替样式类来实现此目的

    
    

    然后造型就像

    li { backgorund:white; }
    li.odd { background:silver; }
    

    您可以使用javascript进一步自动化此过程(下面的jQuery示例)

    $(document).ready(function() {
      $('table tbody tr:odd').addClass('odd');
    });
    

  • 推荐阅读
    乐韵答题
    这个屌丝很懒,什么也没留下!
    DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
    Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有