首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >利用CSS选择器nth-child实现隔行设置不同样式

利用CSS选择器nth-child实现隔行设置不同样式

作者头像
德顺
发布2019-11-12 23:16:06
2.2K0
发布2019-11-12 23:16:06
举报
文章被收录于专栏:前端资源前端资源

奇葩老板就会有奇葩需求,他要求像上图一样,每两行用一条横线隔开,但这是循环出来的呀,怎么才能每隔一行选中5个呢?

可以用 CSS 选择器 nth-child 来实现:

nth-child 有不少扩展应用,比如:

nth-child(odd) 匹配奇数个(1、3、5)。

nth-child(odd) 匹配偶数个(2、4、6)。

nth-child(3n) 匹配3的倍数个(3、6、9)。

nth-child(3n+1) 匹配3的倍数加1个(1、7、10)。

我们就可以利用上面的方法,实现每隔2行,加一条下边框,实现横线隔开的效果了。

HTML代码:

<ul class="icon">
    <li><span>W</span></li>
    <li><span>3</span></li>
    <li><span>H</span></li>
    <li><span>5</span></li>
    <li><span>.</span></li>
    <li><span>前</span></li>
    <li><span>端</span></li>
    <li><span>资</span></li>
    <li><span>源</span></li>
    <li><span>网</span></li>
    <li><span>欢</span></li>
    <li><span>迎</span></li>
    <li><span>您</span></li>
    <li><span>!</span></li>
    <li><span>!</span></li>
    <li><span>有</span></li>
    <li><span>你</span></li>
    <li><span>,</span></li>
    <li><span>真</span></li>
    <li><span>好</span></li>
</ul>

CSS:

*{
    margin: 0;
    padding: 0;
}
ul,li{
    list-style: none;
}
.icon{
    display: flex;
    flex-wrap: wrap;
    width: 350px;
    justify-content: space-between;
    margin: 20px auto;
}
.icon>li>span{
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin: 10px;
    border-radius: 50%;
    background: #0a94ff;
    text-align: center;
    font-size: 22px;
    color: #FFF;
}
.icon>li:nth-child(10n-0),.icon>li:nth-child(10n-1),.icon>li:nth-child(10n-2),.icon>li:nth-child(10n-3),.icon>li:nth-child(10n-4){
    border-bottom: 1px solid #ccc;
}

主要是通过 .icon>li:nth-child(10n-0),.icon>li:nth-child(10n-1),.icon>li:nth-child(10n-2),.icon>li:nth-child(10n-3),.icon>li:nth-child(10n-4) 选中第 678910 个,设置下边框。

声明:本文由w3h5原创,转载请注明出处:《利用CSS选择器nth-child实现隔行设置不同样式》 https://cloud.tencent.com/developer/article/1537813

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档