时间戳

首页 > 解决方案 > 使用列表项重置 Zebra Css 设计

css - 使用列表项重置 Zebra Css 设计

问题描述

我想要我的列表项的斑马设计。但是当我有“resetZebra”的 li 时，我想重新开始我的斑马设计。

我尝试了这个 css 技巧，但它不起作用。

li:not(.select-group-item):nth-child(even){
          background: red;
 }
.resetZebra{
     background: green !important;
 }
<ul>
<li class="resetZebra">Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="resetZebra">Example</li>
<li>Example</li>
<li>Example</li>
<li class="resetZebra">Example</li>
<li>Example</li>
<li>Example</li>
</ul>

我怎样才能用css做到这一点？有什么建议吗？

编辑：我想在每次重置斑马项目之后从背景白名单项目开始。例如，在这个 dom 树中，第二个 li 必须是白色的，三个必须是红色的。

标签： csshtml

解决方案

您可以通过更改所需的颜色来尝试以下解决方案

var nextColor ="#00FF00" ;
$('.zebralist').children().each(function(index,child){
    if($(child).hasClass("resetZebra")){
    nextColor ="#00FF00";
  } else {
    if(nextColor === "#00FF00"){
        child.style.backgroundColor = "#00FF00";
      nextColor = "#FF0000"
    } else{
    child.style.backgroundColor = "#FF0000";
      nextColor = "#00FF00"
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="zebralist">
<li class="resetZebra">Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="resetZebra">Example</li>
<li>Example</li>
<li>Example</li>
<li class="resetZebra">Example</li>
<li>Example</li>
<li>Example</li>
</ul>

推荐阅读