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

回答

相關問題