html - Div 标签之间的交替背景颜色

Question

我有一个由 div 组成的表格结构。

我只想改变 divLabel 的背景颜色。

表格的每个 divrow 都有一个 divlabel 和一个 divdata 元素。

这是我到目前为止尝试过的:-

http://jsfiddle.net/o5dv4qkc/

不幸的是，标签的颜色不会交替，而是只显示奇数行提到的相同颜色:-

.About_RowLabel:nth-of-type(odd) {
    background-color: #DEF3CA;
}

谁能告诉我为什么这不适用于我的 div 元素？

Answer 1

您没有正确选择 child :向上移动一级到他们的 parent ，然后从那里开始，例如 .someParentClass:nth-of-type(even) .child{}: demo

.About_Row {
  height: 2em;
  width: 500px;
  /*float:left;*/
}
.About_RowLabel {
  width: 98px;
  color: black;
  float: left;
  background-color: #71cd7b;
}
.About_RowData {
  width: 200px;
  float: left;
  margin-left: 20px;
}
.About_Row:nth-of-type(odd) .About_RowLabel {
  background-color: #DEF3CA;
}
.serv_resize {
  border: 1px solid #E2E2E2;
  color: #444;
  width: 425px;
  float: left;
  margin: 10px 10px 10px 0;
  padding: 5px;
  height: 239px;
}

<div id="you" class="serv_resize">
  <div class="About_Row">
    <div class="About_RowLabel">
      BirthDate:
    </div>
    <div class="About_RowData">
      <asp:Label ID="lblDoB" runat="server" Text="DoB"></asp:Label>
    </div>
  </div>
  <div class="About_Row">
    <div class="About_RowLabel">
      As of:
    </div>
    <div class="About_RowData">
      <asp:Label ID="lblAsOf" runat="server" Text="Dt"></asp:Label>
    </div>
  </div>
  <div class="About_Row">
    <div class="About_RowLabel">
      Phone:
    </div>
    <div class="About_RowData">
      <asp:Label ID="lblPhone" runat="server" Text="Ph"></asp:Label>
    </div>
  </div>
</div>