CSS嵌套列表项目和替代背景

我正在寻找一种方法来让列表项目具有交替的背景颜色。当存在嵌套列表时，项目会交替进行，但缩进时不会将父项的背景颜色向下嵌套到其嵌套子项。 nested list example CSS嵌套列表项目和替代背景

这是不可能应用类。项目数量也是可变的。最好它应该适用于无限量的嵌套列表。但如果这是不可能的话，3个深度的帽子（如图片）就足够了。如果使用div而不是li和ul更容易，那对我来说也是可能的。我更喜欢纯HTML/CSS。

因为我所有的实验都没有效果，所以我只能提供一个带有嵌套列表的JSFiddle。

<ul> 
<li>Item 1 
    <ul> 
     <li>Item 1-1</li> 
     <li>Item 1-2 
      <ul> 
       <li>Item 1-2-1</li> 
       <li>Item 1-2-2</li> 
      </ul> 
     </li> 
     <li>Item 1-3</li> 
    </ul> 
</li> 
<li>Item 2 
    <ul> 
     <li>Item 2-1 
      <ul> 
       <li>Item 2-1-1</li> 
      </ul> 
     </li> 
    </ul>  
</li> 
<li>Item 3</li> 
<li>Item 4</li> 
</ul>

来源

2015-07-20 Pepe

这不仅适用于CSS。在CSS中，要求元素知道其父元素是不可能的。 CSS只能级联到子元素。虽然顶层或嵌套的“李”可以知道它的兄弟姐妹，但死者无法知道它的父母是奇数还是偶数。因此，它不能重复该模式。 – fontophilic

这是一个潜在的解决方案：https://jsfiddle.net/qmdwpzt8/3/

不知道您的所有需求会被它碰到，但我div的更新列表：

<ul> 
    <li><div>Item 1</div> 
     <ul> 
      <li><div>Item 1-1</div></li> 
      <li><div>Item 1-2</div> 
       <ul> 
        <li><div>Item 1-2-1</div></li> 
        <li><div>Item 1-2-2</div></li> 
       </ul> 
      </li> 
      <li><div>Item 1-3</div></li> 
     </ul> 
    </li> 
    <li><div>Item 2</div> 
     <ul> 
      <li><div>Item 2-1</div> 
       <ul> 
        <li><div>Item 2-1-1</div></li> 
       </ul> 
      </li> 
     </ul>  
    </li> 
    <li><div>Item 3</div></li> 
    <li><div>Item 4</div></li> 
</ul>

然后用jQuery添加背景颜色：

$(document).ready(function() { 
    var b = true; 
    $("div").each(function(index) { 
     b = !b; 
     if (b) { 
      $(this).css("background-color", "#ff0000"); 
     } else { 
      $(this).css("background-color", "#00ff00"); 
     }    
    }); 
});

这取决于jQuery/Javascript。

来源

2015-07-20 20:55:39 Ryan

因为用纯CSS做它似乎不可能，这个答案可能是最简单的使用 – Pepe

CSS嵌套列表项目和替代背景

回答

相关问题