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