html - 每个其他 div 的孩子的第 n 个孩子

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

为了针对所有其他 nth-child，这里有一个你应该在你的 CSS 中拥有的示例：

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

您可以用偶数或奇数以及其他一些东西替换参数。以下是关于 nth-child 伪类的一些文档：http: //www.w3schools.com/cssref/sel_nth-child.asp。