首页手记区分一下前端里面jQuery和css中的odd和even

区分一下前端里面jQuery和css中的odd和even

标签：

Html/CSS JQuery

odd：奇数
even：偶数

    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.min.js"></script>
    <style type="text/css">
        ul#one li:nth-child(even){
            background-color: red;
        }
    </style>
</head>
<body>
    <ul id="one">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul id="two">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script type="text/javascript">
        $('#two li:even').css('background-color','blue');
    </script>
</body>
</html>

这里id为one的ul中<li>2</li>的背景颜色会改变为红色，也就是说这里li的下标是从1开始的。
而id为two的ul中<li>1</li><li>3</li>的背景颜色会变为蓝色，也就是说，这里li的下标是从0开始的
同理odd类似
总结：jQuery中使用even或odd对元素筛选时下标从0开始计数，而css中下标从1开始计数。

点击查看更多内容