Question

我们已将无序列表与产品数据嵌套在一起。对于

<ul class="data_holder">

我们想要奇/偶背景色。

ul.data_holder:odd => background: #ccc

ul.data_holder:even => background: #FFF

我们的整个结构如下所示（如您所见，我们的ul.data_holder位于父无序列表的“ li”元素内：

<ul class="row_holder">
 <li class="row">
   <ul class="data_holder">
     <li class="data">Data 1</li><li class="data">Data 2</li><li class="data">Data 3</li>
   </ul>
 </li>
  <li class="row">
   <ul class="data_holder">
     <li class="data">Data 1</li><li class="data">Data 2</li><li class="data">Data 3</li>
   </ul>
 </li>
  <li class="row">
   <ul class="data_holder">
     <li class="data">Data 1</li><li class="data">Data 2</li><li class="data">Data 3</li>
   </ul>
 </li>
  <li class="row">
   <ul class="data_holder">
     <li class="data">Data 1</li><li class="data">Data 2</li><li class="data">Data 3</li>
   </ul>
 </li>
</ul>

感谢帮助

Answer 1

您需要将CSS应用于li，而不是ul内部的li。尝试以下CSS：

    ul.row_holder li:nth-child(odd) ul{
          background-color:red;
    }
    ul.row_holder li:nth-child(even) ul{
          background-color:black;
    }

Answer 2

您可以使用以下CSS结构nth-child（odd / even）。有了这段代码，您将可以为像这样的无序列表中的奇/偶对象设置不同的样式。由于您的第一个<ul>中包含<li>个元素，因此建议您在HTML中的.row个元素上使用此选择器。

.row:nth-child(odd) {
  background: #ccc;
}

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

嵌套<ul>奇/偶CSS

2 个答案: