：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代码更改为nth-child（单数）以测试它。但那也不起作用。

Answer 1

:nth-child()伪类会计算共享同一父母的所有兄弟姐妹。

由于容器中有多种元素类型，并且您只定位div，因此可以使用:nth-of-type()来跳过script元素。

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

所以当你说：

  

我试图给容器中的每个第二个div提供与第一个不同的背景颜色。

尝试这样的事情：

div:nth-of-type(even)

Answer 2

您需要nth-of-type而不是nth-child。这只会考虑<div>个标记，无论它们之间是什么。

Answer 3

每个条目有两个子元素。有一个脚本孩子和一个div孩子。您可以使用:nth-child(4n+1)（或偶数为+3）来解决div，或者您可以使用：nth-​​of-type选择器来解决div元素：

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