html - 嵌套奇数/偶数 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>

感谢帮助

标签： htmlcsshtml-lists

Answer 1

您需要将 CSS 应用于.而li不是. 试试下面的 CSS：ulli

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