：nth-​​child（）問題選擇每隔一秒div

Question

我想給我的容器中的每個第二個div與第一個不同的背景顏色。我的問題是，在div之間有一個JavaScript代碼。這裏有一個例子：

echo '<div class="holder">'; 
    echo '<script type="text/javascript"></script>'; 
    echo '<div class="list_item"></div>'; 
    echo '<script type="text/javascript"></script>'; 
    echo '<div class="list_item"></div>'; 
    echo '<script type="text/javascript"></script>'; 
    echo '<div class="list_item"></div>'; 
    echo '<script type="text/javascript"></script>'; 
    echo '<div class="list_item"></div>'; 
    echo '<script type="text/javascript"></script>'; 
    echo '<div class="list_item"></div>'; 
echo '</div>'; 

當我現在添加下面的CSS代碼：

.holder .list_item:nth-child(even) { 
    background-color:#fff; 
} 

它會給所有的div的白色背景顏色。

有沒有人有一個想法如何解決這個???

P.S：我將css代碼更改爲n-child（奇數）以便測試它。但是那也行不通。

Answer 1

你需要nth-of-type而不是nth-child。這隻會考慮<div>標籤，無論它們之間有什麼內容。

Answer 2

:nth-child()僞類將計數所有兄弟姐妹共享相同的父級。

由於容器中有多個元素類型，並且您只針對div，因此可以跳過script元素，而不是使用:nth-of-type()。

:nth-of-type()僅匹配相同類型的元素。

所以，當你說：

我想給每個第二個div在我的容器相比，第一個不同的背景顏色。

嘗試這樣：

div:nth-of-type(even) 

Answer 3

每個條目有兩個子元素。有一個劇本小孩和一個div小孩。你既可以解決使用（甚至或+3）:nth-child(4n+1)的div，或者你可以使用：第n-的類型選擇，只是解決div元素：

:nth-of-type(odd/even) {…}