Question

我有一个像div这样的结构表。

我想替换divLabels的背景颜色。

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

这是我到目前为止所尝试的： -

不幸的是，标签的颜色不会交替，而是显示与奇数行相同的颜色： -

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

有人能告诉我为什么这对我的div元素不起作用吗？

Answer 1

你没有正确选择孩子：向父母提升一级，然后从那里开始，如.someParentClass:nth-of-type(even) .child{}：demo

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

所有nth-伪选择器都与兄弟元素一起使用。也就是说，共享同一个直接父级的元素。

您的所有.About_RowLabel都是其父级.About_Row元素中的第一个，所以它们都是奇数。

瞄准交替的父母

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

http://jsfiddle.net/o5dv4qkc/4/

演示

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

2 个答案: