Question

我正在尝试使div的INSIDE reportRow的背景颜色具有特定的背景颜色，但我希望它每隔一个reportRow切换颜色。

我似乎无法让第n个孩子上班。有人可以帮忙吗？

<div class="reportRow">
    <div style="width:75px;">Date1</div>
    <div style="width:360px;">Address1</div>
    <div style="width:40px;">Edit1</div>
    <div style="width:40px;">Print1</div>
    <div style="width:40px;">Delete1</div>
</div>

<div class="reportRow">
    <div style="width:75px;">Date2</div>
    <div style="width:360px;">Address2</div>
    <div style="width:40px;">Edit2</div>
    <div style="width:40px;">Print2</div>
    <div style="width:40px;">Delete2</div>
</div>

Answer 1

http://jsfiddle.net/bhlaird/t75Zu/
您想在reportRow上使用nth-child，但设置内部div的背景

.reportRow:nth-child(2n) div {
    background-color: blue;
}

Answer 2

为了定位每个其他的n-child，这里有一个你应该在CSS中拥有的例子：

.reportRow:nth-child(even) {
  background: #fff;
}

您可以将参数替换为偶数或奇数以及其他一些参数。这里有关于nth-child psuedo-class的一些文档：http://www.w3schools.com/cssref/sel_nth-child.asp。

每个其他div的孩子的n-child

2 个答案: