简单的隔行换色 jq

来源:互联网 发布:windows rt连接口 编辑:程序博客网 时间:2024/06/13 00:29

随手写的大家多包涵 简单的隔行换色

页面

html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><style>    .box{        width: 100px;        margin: 0 auto;    }    .box p{      text-align: center;        line-height: 14px;    }</style><body><div class="box">    <p>1</p>    <p>2</p>    <p>3</p>    <p>4</p>    <p>5</p>    <p>6</p>    <p>7</p></div></body></html>
js

<script src="js/jquery-3.2.1.js" type="application/javascript" rel="script"></script><script>    $(".box > p:even").css({"background":"red"})    $(".box p:first-child").css({"background":"blue"})    $(".box p:last-child").css({"background":"blue"})    $(".box > p:odd").css({"background":"#ccc"})</script>