Question

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

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

CSS：

#loginForm label {
    color: #FF0000
}

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

DOM：

<div id="loginForm">
    <form>
        <label>Label 1</label>
        <label>Label 2</label>
    </form>
</div>

我已经尝试将这个HTML和CSS放到JSFiddle中，一切正常，所以我只能想象它与我的DOM操作有关。

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

编辑：

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

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

Answer 1

我猜你要找的是:nth-child(2n+1)选择器。

示例：http://jsfiddle.net/usScP/

您还可以使用:nth-child(odd)或:nth-child(even)进一步简化此操作。通过使用:nth-child( number )选择器，您只能以NodeList顺序寻址该索引。

nth-child没有处理动态生成的DOM

1 个答案: