动态添加项目时，CSS第n个子属性不能正常工作

Question

我在页面中定义了一些div

<div class="alternating">random text</div>
<div class="alternating">random text</div>
<div class="alternating">random text</div>
<div class="alternating">random text</div>
<div class="alternating">random text</div>

我已经添加了一个css属性

.alternating:nth-child(even){
    background: #FF0000;
}

在加载页面时，一切看起来都很好，偶数行是彩色的。但是当我向这个div的父级添加一个新的div时(使用Knockout和jquery)，新添加的行并没有显示正确的颜色。这意味着如果我的最后一行是奇怪的(没有颜色)，那么新添加的div也会显示为没有颜色。或者，如果最后一个div是均匀的(带有颜色)，那么新添加的div也会带有颜色出现。

但在那之后，它又恢复正常了。我的问题只是增加了第一个div。

有什么想法吗？

Answer 1

下面是一个小的FIDDLE，我从DOM中的div开始，然后通过单击添加它们。

相关: JS

$('.button').click(function() {
    $('.holder').append("<div class='inside'>dynamic div</div>");
});

相关CSS

.holder {
    width: 300px;
    height: 400px;
    border: 1px solid black;
}
.inside {
    height: 30px;
    border: 1px solid black;
}
.inside:nth-child(even) {
    background-color: blue;
}