模拟具有第 n-child() 和<li>不带类的行

Question

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

我被要求画他们表(即行)。为了便于阅读，我想将奇数行设置为背景色，将偶数行设置为另一种背景色。

我尝试用nth-child()选择器实现此效果，但无法以任何方式完成此任务。

我肯定知道的:我必须画<li>元素(3)的列数。所有<li>标签都是相等的(没有特定的类或id)

我不知道的:我从后台获得的<li>元素的数量。

我所做的是设置它们的宽度为%，并浮动它们。我无法做到的是将背景以行替换。

最终的列表应该看起来像所附的示例，但使用nth-child()或类似的而不是手动:

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

Answer 1

第n个子选择器可以使用公式来选择项:

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

Answer 2

您可以使用:nth-child和even或odd来选择您感兴趣的li。

例如

:。

li:nth-child(even){
    background-color: red;
}