：nth-​​child（）で1秒ごとにdivを選択します。

Question

コンテナ内のすべての2番目の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コードをnth-child（奇数）に変更してテストしました。しかし、それはどちらもうまくいきませんでした。

Answer 1

あなたはnth-of-type代わりのnth-childを必要とします。これは、その間に何があるかにかかわらず、<div>タグだけを考慮に入れます。

Answer 2

:nth-child()疑似クラスは、すべての兄弟が同じ親を共有するとカウントされます。

コンテナに複数の要素タイプがあり、divのみを対象としているため、代わりに:nth-of-type()を使用してscript要素をスキップできます。

:nth-of-type()は、同じタイプの要素にのみ一致します。

は、だからあなたが言うとき：私は私のコンテナに最初のものとは異なる背景色を毎秒のdivを与えることをしようとしています

。

このような何か試してみてください：

div:nth-of-type(even) 

Answer 3

エントリごとに2つの子要素があります。スクリプトの子とdivの子があります。あなたは（も、または3）:nth-child(4n+1)を使用してdiv要素を扱うことができいずれか、またはあなたが使用することができます：ちょうどdiv要素に対処するために、n番目-の型セレクタを：

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