html - 使用没有类的 nth-child() 和 模拟行

Question

我必须设置从后端接收的元素列表的样式。目前我刚刚得到 <li>元素，很多。

有人要求我将它们画成表格(即行)。为了清晰易读，我想为奇数“行”设置背景颜色，“偶数”行设置另一种颜色。

我试图用 nth-child() 来达到这个效果selector ，但无法以我能想到的任何方式完成此任务。

我确定知道的是:我必须绘制 <li> 的列数要素 (3)。全部<li>标签相等(没有特定的类或 ID)

我不知道的是:<li> 的数量我从后端获取的元素。

我所做的是用 % 设置宽度并 float 它们。我无法实现的是按行交替背景。

最终列表应该与示例中的列表相同，但使用的是 nth-child()或类似而不是手动:

http://codepen.io/barleby/pen/dpkjmy

Answer 1

nth-child 选择器可以使用公式来选择元素:

li {
     width:30%;
     background-color:grey;
     float:left;
     padding:10px;
     margin:10px;
     list-style-type:none;
}

li:nth-child(6n+4), li:nth-child(6n+5), li:nth-child(6n+6) {
    background-color: #298EB2;
}