复位斑马的CSS设计与列表项

Question

我想斑马设计我的名单items.But我希望当我有李用“resetZebra”重新启动我的斑马设计。

我想这个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树第二李每个时间。例如必须是白色和三个必须为红色。

Answer 1

你可以通过改变你所需要的颜色试试下面的解决方案

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>