我想用三种不同的颜色来设计我的列表项。推荐的做法是什么?
到目前为止我的代码:
li {
width: 33.333%;
float: left;
padding: 15px;
list-style: none;
}
.light {
background-color: #085dce;
}
.medium {
background-color: #0051bb;
}
.dark {
background-color: #004bad;
}
<ul>
<li>light-color</li>
<li>medium-color</li>
<li>dark-color</li>
<li>light-color</li>
<li>medium-color</li>
<li>dark-color</li>
<li>light-color</li>
<li>medium-color</li>
<li>dark-color</li>
<li>light-color</li>
</ul>
最佳答案
使用 nth-child
来区分元素。
li:nth-child(3n+1) {background-color: #085dce;}
li:nth-child(3n+2) {background-color: #0051bb;}
li:nth-child(3n) {background-color:#004bad;}
关于html - 使用不同颜色的样式列表项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47119874/