简单的隔行换色 jq

最新推荐文章于 2023-01-14 23:14:10 发布

IT、木易

最新推荐文章于 2023-01-14 23:14:10 发布

阅读量558

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_37212162/article/details/78471791

版权

jQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

页面

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>

<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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

IT、木易

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
简单的隔行换色 jq

随手写的大家多包涵简单的隔行换色页面html Title .box{ width: 100px; margin: 0 auto; } .box p{ text-align: center; line-height: 14px; } 1 2
复制链接

扫一扫