Question

我必须设置从BackEnd收到的项目列表的样式。目前我只获得了<li>元素，其中很多元素。

我被要求把它们画成桌子（即行）。为了清晰起见，我想设置奇数＆＃34;行＆＃34;有背景色，＆＃34;甚至＆＃34;与另一行。

我尝试使用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

您可以使用function sendRequestPrint(data){ var url = data.value.url; // make a request to get the pdf // do other stuff... }和:nth-child或even来选择您有兴趣定位的odd。

例如：

li

有关详情，请参阅this article。

使用nth-child（）和<li>模拟行而不使用Classes

2 个答案: