Question

我有以下HTML：

<html>
    <body>
        <div id="parent">
            <div>
                <div>A</div>
                <div>A</div>
                <div>A</div>
            </div>
            <div>
                <div>A</div>
                <div>A</div>
                <div>A</div>
            </div>
            <div>
                <div>A</div>
                <div>A</div>
                <div>A</div>
            </div>
        </div>
    </body>
</html>

和以下CSS：

#parent div:nth-child(2) {
  background-color: blue;
}

我希望第四，第五和第六个“ A”是蓝色的，因为我试图仅将ID父元素的元素的第二个子作为目标，但是，第二个和第八个也被设置为蓝色。为什么会这样，我该如何解决？

这是我的结果的图片： https://i.imgur.com/c2SVrs7.png

这是我预期结果的图像： https://i.imgur.com/36oUW45.png

Answer 1

您的css代码针对div's内#parent的所有子级子级。您只需要使用#parent选择器来定位>的直接子级：

#parent > div:nth-child(2) {
  background-color: blue;
}

<div id="parent">
    <div>
        <div>A</div>
        <div>A</div>
        <div>A</div>
    </div>
    <div>
        <div>A</div>
        <div>A</div>
        <div>A</div>
    </div>
    <div>
        <div>A</div>
        <div>A</div>
        <div>A</div>
    </div>
</div>

Answer 2

尝试一下：

#parent > div:nth-child(2) {
  background-color: blue;
}

您看到第二个和第八个div蓝色，因为它们也是#parent的“第二个”子级（相对于其父div）。在CSS选择器中使用“>”仅将样式应用于#parent的直子div。

第n个孩子选择了其他元素

2 个答案: