嵌套 奇数/偶数css

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

Answer 2

You need to apply a CSS to the li, not to the ul which is inside the li
Try Below CSS  
   ul.row_holder li:nth-child(odd) ul{
      background-color:red;
    }
    ul.row_holder li:nth-child(even) ul{
      background-color:black;
    }