:nth-child() 问题选择每隔一个 div答案

【问题标题】：:nth-child() issue selecting every second div:nth-child() 问题选择每隔一个 div
【发布时间】：2017-10-31 11:24:48
【问题描述】：

与第一个相比，我试图为容器中的第二个 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(odd) 以对其进行测试。但这也没有用。

【问题讨论】：

这是另一种方式codepen.io/anon/pen/GmbaOB

标签： php html css css-selectors

【解决方案1】：

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

【讨论】：

@Dennis 我做了一个小的更正。 nth-of-type 实际上只检查标签类型，而不是整个选择器。
好的。非常感谢。

【解决方案2】：

:nth-child() 伪类将计算所有兄弟姐妹共享同一个父级。

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

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

所以当你说：

与第一个相比，我试图为容器中的第二个 div 赋予不同的背景颜色。

试试这样的：

div:nth-of-type(even)

【讨论】：

【解决方案3】：

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

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

【讨论】：