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嵌套列表項目和替代背景

回答

相關問題