Question

我有以下演示：

#parent:nth-child(1) {
  color: blue;
}

<html>

<body>
  <div id="parent">
    <div>first child</div>
    <div>second child</div>
    <div>third child</div>
  </div>
</body>

</html>

我期望父元素的第一个孩子是蓝色，但是他们都是蓝色。为什么会这样？

Answer 1

The problem in your case is the way :nth-child works，基本上，您需要在子/兄弟级别而不是父级别添加它（并且由于您的parent没有什么不同，因此选择器基本上就像{{1} }。有了选择器，它就好像#parent是您要选择的第一个孩子一样，这就是为什么它全都是蓝色的原因。稍作更改，就可以了：

#parent

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

此外，正如下面刚刚提到的George，这将适用于<html> <body> <div id="parent"> <div>first child</div> <div>second child</div> <div>third child</div> </div> </body> </html>的后代的任何第一个div出现，在您的情况下，它没有什么区别，但结构可能有所不同，因此您只想将其限制为直接后代，则可以使用更具体的选择器#parent

Answer 2

这是因为您在CSS中选择了父项，但没有选择其子项名称的元素。试试这个，希望对您有帮助。

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

<html>

<body>
  <div id="parent">
    <div>first child</div>
    <div>second child</div>
    <div>third child</div>
  </div>
</body>

</html>

第n个子元素定位到所有子元素

2 个答案: