CSS nth-child不适用于动态隐藏元素[AngularJS]

Question

我正在尝试在每个元素上实现CSSnth-child如果达到某个数字我想隐藏第一个元素，并在数字再次减少时使其重新出现。

问题是nth-child仍然计算隐藏元素，从而错误地实现了样式。这是个错误还是我做错了？

注意：如果我使用jQuery，也会发生同样的事情

http://jsfiddle.net/bedex78/uZ5wn/23/

视图：

<div ng-app>
    <div ng-controller="TheCtrl">
        <p>Amount to add: <input type="text" ng-model="amount" ng-init="amount=1"></p>
        <div class='holder'>
            <div ng-class='elements.length < 6 ? "inside" : ""'
                 ng-hide="elements.length >= 6">
                <button class='button' ng-click="add(amount)">Add more</button>
            </div>
            <div class='inside' ng-repeat="(k,v) in elements">
                {{ $index }} <a href="" ng-click="remove($index)">Remove</a>
            </div>
        </div>
    </div>
</div>

JS（AngularJS）：

function TheCtrl($scope) {
    $scope.elements = [{id:1},{id:2}]
    $scope.add = function(amount) {
        for (i=0; i < amount; i++){
            $scope.elements.push({id:$scope.elements.length+1});
        }
    };
    $scope.remove = function(index) {
        $scope.elements.splice(index, 1);
    };
}

CSS：

.holder {
    width: 300px;
    height: 400px;
    border: 1px solid black;
}
.inside {
    height: 30px;
    border: 1px solid black;
}
.inside:nth-child(3n+1) {
    background-color: yellow;
}
.inside a {
    float: right;
}

Answer 1

这是因为隐藏元素仍在DOM中。因此，它被视为子项，并相应地应用样式。

您可以尝试使用ng-if而不是ng-hide。它将使div从DOM中消失，样式将正常工作。

示例