CSS nth-child 属性在动态添加项目时无法正常工作

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;
}