我有以下演示：
#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>我期望只有父元素的第一个孩子是蓝色的，但是它们全都是蓝色。为什么是这样？
您所遇到的问题是:nth-child工作方式，基本上您需要在子/兄弟级别上而不是在父级别上添加它（并且由于您parent没有什么不同，因此选择器基本上就像#parent）。使用选择器的方式，它就像#parent是要选择的第一个孩子一样，这就是为什么它全都是蓝色的原因。稍作更改，就可以了：
#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>而且，正如乔治在下面提到的那样，这将适用于作为的后代的任何第一个div出现#parent，在您的情况下，这没有什么区别，但是可能具有不同的结构，因此，如果您只想将其限制为直接后代，则可以使用更具体的选择器#parent > div:nth-child(1)
| 归档时间： |
|
| 查看次数： |
35 次 |
| 最近记录： |