动态添加元素时，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;
}