html实现各行变色nth,利用CSS选择器nth-child实现隔行设置不同样式

奇葩老板就会有奇葩需求，他要求像上图一样，每两行用一条横线隔开，但这是循环出来的呀，怎么才能每隔一行选中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、4、7、10)。

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

HTML代码：

• W
• 3
• H
• 5
• .
• 前
• 端
• 资
• 源
• 网
• 欢
• 迎
• 您
• ！
• ！
• 有
• 你
• ，
• 真
• 好

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 个，设置下边框。