在html页面里难免会遇到隔行换色
HTML

<body>
    <div class="div1">我是奇数1</div>
        <div class="div2">我是偶数2</div>
        <div class="div3">我是奇数3</div>
    <div class="div4">我是偶数4</div>
</body>

1 css方法

css

<style type="text/css">
    div {border:1px solid #f00;width:100px;height:100px;}
    div:nth-child(odd){background:#f00;text-align:center;}
    div:nth-child(even){background:#00f;text-align:center;}搜索
</style>

2 js方法(选择器的使用)

我们想要查找自然顺序为奇数(索引值为偶数)的div标签

// 选择了id分别为n1、n7的两个元素

$("div:even");

接着,查找表格中的所有奇数行(索引值为偶数),则可以编写如下jQuery代码:

// 选择了id分别为n9、n11的两个元素

$("tr:even");

3 js方法(取余数)

 $(function(){ 
            var item = $(".div"); 
            for(var i=0;i<item.length;i++){ 
                if(i%2==0){ 
                    item[i].style.backgroundColor="#888"; 
                } 
            } 
        });


扫描二维码,在手机上阅读!