nth-child无法动态生成DOM

我在我的CSS中使用nth-child存在问题（到目前为止在Chrome和Firefox中尝试过）。 DOM的部件使用香草DOM处理方法（使用document.createElement，document.appendChild等）nth-child无法动态生成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操作。

我注意到在第n个孩子的MDN页面上，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);

来源

2014-02-19 thesonglessbird

那么，DOM操作在哪里？ – jAndy

你可以显示你的DOM操作？并最好在jsfiddle – kamilkp

适合我吗？ http://jsfiddle.net/3D6tD/ –

我猜你在找什么是:nth-child(2n+1)选择。

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

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

来源

2014-02-19 15:08:20 jAndy

不能解决我的问题，因为我无法发布确切的代码，但它足够的信息让我走上正确的道路。需要理解我对如何完全符合孩子的作品的理解......感谢！ – thesonglessbird

看看这里，一个交互式测试仪的优秀例子：http://css-tricks.com/useful-nth-child-recipies/ –

nth-child无法动态生成DOM

回答

相关问题