AngularJS ng-repeat中nth-child失效：背景色设置问题求助

It’s frustrating when one style works (font color) but another doesn’t—let’s break down why your background color might not be applying and fix it.

Common Causes & Fixes #

1. Incorrect Class Application

First, make sure you’re using ng-class correctly to toggle alternating row styles. Here’s the proper implementation:

Updated HTML:

<div class="row" style="margin: 25px 0;">
  <div 
    ng-repeat="katt in minaKatter" 
    class="cat-row-ads test" 
    ng-if="!katt.isDeceased && katt.canBeBreedingMale"
    ng-class="{'odd-row': $index % 2 === 1, 'even-row': $index % 2 === 0}"
  >
    <div class="tableContainer">
      <!-- Your cat content here -->
    </div>
  </div>
</div>

Corresponding CSS:

.even-row {
  background-color: #ffffff; /* White for even rows */
  color: #333; /* Example font color */
}

.odd-row {
  background-color: #f5f5f5; /* Light gray for odd rows */
  color: #000; /* Example font color */
}

2. CSS Specificity Conflicts

If font color works but background doesn’t, another CSS rule is probably overriding your background style. Classes like .cat-row-ads or .tableContainer might have a higher specificity. Boost your row classes’ specificity to fix this:

/* More specific selector to override conflicting styles */
.cat-row-ads.even-row {
  background-color: #ffffff;
}

.cat-row-ads.odd-row {
  background-color: #f5f5f5;
}

3. Parent/Child Style Interference

Sometimes a child element (like .tableContainer) might cover your row’s background. Ensure it doesn’t have its own background set, or make it transparent:

.tableContainer {
  background-color: transparent; /* Let the row's background show through */
}

4. Verify ng-if isn’t Breaking $index

Since you’re using ng-if with ng-repeat, confirm $index counts filtered items correctly. If needed, pre-filter the array in your controller to avoid index confusion:

Controller Code:

$scope.filteredCats = $scope.minaKatter.filter(katt => !katt.isDeceased && katt.canBeBreedingMale);

HTML:

<div 
  ng-repeat="katt in filteredCats" 
  class="cat-row-ads test"
  ng-class="{'odd-row': $index % 2 === 1, 'even-row': $index % 2 === 0}"
>
  <!-- Content -->
</div>

Quick Debug Tip #

Use your browser’s dev tools (F12) to inspect the row element. Check the "Styles" tab—if your background color rule is crossed out, it’s being overridden. Adjust your CSS selectors to be more specific.

内容的提问来源于stack exchange，提问作者Lacon