关于javascript：nth-child无法处理动态生成的DOM

nth-child not working on dynamically generated DOM

我在CSS中使用nth-child时遇到了问题(到目前为止，已在Chrome和Firefox中尝试过)。使用普通的DOM操作方法(document.createElement，document.appendChild等)在客户端动态生成部分DOM。

我正在使用的CSS和生成的DOM如下：

CSS：

1
2
3
4
5
6
7

#loginForm label {
color: #FF0000
}

#loginForm label:nth-child(1) {
color: #8a8a8a;
}

DOM：

1
2
3
4

<form>
<label>Label 1</label>
<label>Label 2</label>
</form>

我尝试将HTML和CSS放入JSFiddle中，并且一切正常，因此我只能想象这与我的DOM操作有关。

我在第n个孩子的MDN页面上注意到Opera无法处理元素的动态插入，但是没有提及其他浏览器。我可以假设没有浏览器可以处理动态插入和nth-child吗？如果是这样，是否有解决方法？

编辑：

DOM插入代码(最后一行使用传递到包含代码的函数中的目标变量)。显然，还有更多代码，但这是关键部分：

1
2
3
4
5
6
7

var contentHolder = document.createElement("div");
var form = document.createElement("form");
var userLabel = document.createElement("label");

form.appendChild(userLabel);
contentHolder.appendChild(form);
document.getElementById(target).appendChild(contentHolder);