Question

我要为列表项使用斑马纹设计。但是当我对“ 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做到这一点？有什么建议吗？

编辑：我想每次在resetZebra项目之后都从背景白色列表项开始。例如在此dom树中，第二个li必须为白色，三个li必须为红色。

Answer 1

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

app2.controller('dtAssignVendor',function ($scope, $http, DTOptionsBuilder, DTColumnBuilder,DTInstances) {
       $scope.GetFiler = function () {
     //get input values into scope instead of javascript variable
    //var strZone = $('#SAPExecutive_R4GState').val();
    //var strUtility = $('#ddlUtility').val();
    $scope.strZone = $scope.SAPExecutive_R4GState;
    $scope.strUtility = $scope.ddlUtility;
    //redraw table on button click
    $scope.dtInstanceNonInvProduct.DataTable.draw();

}  
$scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
    url: AppConfig.PrefixURL + "/App/GetMPFilter",
    type: "POST",
    data: JSON.stringify({ strZone: $scope.strZone, strUtility: $scope.strUtility }),
})
.withPaginationType('full_numbers')
.withDisplayLength(10);
$scope.dtColumns = [
    DTColumnBuilder.newColumn(null, '').renderWith(function (data, type, full) {
        return '<input type="checkbox" class="check" data-object-id="' + full.objectid + '">'
    }),
    DTColumnBuilder.newColumn("MAINTENANCEZONENAME", "MAINTENANCEZONENAME"),
    DTColumnBuilder.newColumn("MAINTENANCEZONECODE", "MAINTENANCEZONECODE")
]

$scope.dtInstanceNonInvProduct = {};
})

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"
    }
  }
})

用列表项重置Zebra CSS设计

1 个答案: