如何在包含img等标签的section元素中选中第二个div子元素

正确选择器写法 #

你可以使用nth-of-type结合直接子元素选择器实现需求：

section > div:nth-of-type(2)

原写法失效原因 #

1. 你之前写的section div:nth-child(2)没有添加直接子元素匹配符>，属于后代选择器，会匹配section内部所有层级中、作为父元素第二个子节点的div元素，因此会命中深层子元素。
2. nth-child的计数规则是统计同一个父级下所有类型的子元素，你的section下第一个子元素是img，第二个是第一个div，第三个才是你要的第二个div，就算加了>写section > div:nth-child(2)也只会匹配到第一个div，不符合需求。

可选替代方案（不推荐） #

如果你坚持用nth-child，可以按所有子元素的总序号写：

section > div:nth-child(3)

该方案兼容性和nth-of-type一致，但缺点是如果后续修改section的子元素顺序/新增其他类型子元素，序号就会失效，需要同步修改选择器。

内容的提问来源于stack exchange，提问作者gvdltubdlpwfsgmpx