如何在CSS中选中嵌套在不同div内的前两个img元素且无需额外加类

你可以通过组合 :nth-of-type() 选择器实现需求，最终生效的CSS写法如下：

/* 选中.section-container下前2个div子元素内部的img */
.section-container div:nth-of-type(-n+2) img {
  width: 200px;
}

原理解释 #

1. 之前写法失效的原因：nth-child() 是相对于当前元素的直接父元素做匹配的，你直接给img加nth-child(-n+2)，匹配规则就变成了「每个img所在的父div里，排在前2位的img元素」，而你的每个div里只有1个img，所以所有img都会被命中，完全不符合预期。
2. 上述解决方案的逻辑：

• 首先把匹配锚点放在img的父级div上，div:nth-of-type(-n+2) 的作用是选中.section-container下，同类型为div的前2个兄弟元素
• 再用后代选择器匹配这两个div内部的img元素，就刚好命中了你需要的section范围内的前2个img

可选的精准写法 #

如果你的.section-container下还存在其他不包含img的div，怕误匹配，可以用:nth-child()组合限定范围，结合你的示例DOM结构，section的第一个子元素是h2，前2个带img的div分别是第2、3个子元素：

.section-container div:nth-child(2) img,
.section-container div:nth-child(3) img {
  width: 200px;
}

这种写法的优势是完全精准，劣势是如果section下的子元素顺序/数量调整（比如前面多了一个p标签），选择器就会失效，常规场景更推荐用第一种:nth-of-type()的写法。

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