使用:nth-of-type选择#benefits-section首个div异常问题求助

问题根源 #

你使用的#benefits-section div:nth-of-type(1)是后代选择器，它会匹配#benefits-section下所有层级的div——只要某个div是它自己直接父元素的第一个div类型元素，就会被选中。如果你的HTML结构里，每个目标div都嵌套在父div中，且每个目标div都是其父容器的第一个div，那所有这些div都会被加上黄色背景。

而当你用:nth-of-type(2)或:nth-of-type(3)时，只有#benefits-section下的第2、3个直接子div会被匹配（嵌套在里面的div不是其父元素的第2/3个div），所以看起来功能正常。

修复代码 #

要只选中#benefits-section的直接子div中的第一个，需要加上直接子选择器>明确层级：

#benefits-section > div:nth-of-type(1) {
  background-color: yellow;
}

这样只会匹配#benefits-section下的第一个直接子div，不会影响内部嵌套的其他div，实现预期效果。

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