CSS :nth-child选择器搭配类名使用样式不生效问题

样式不生效是因为你写的选择器完全不符合CSS语法，根本匹配不到目标元素：

• 你写的div.stuff-child(2)是无效选择器：CSS中用来匹配第N个子元素的是:nth-child()伪类，必须以冒号开头拼接在基础选择器后面，你把伪类错写成了class名的后缀-child(2)，浏览器会把它识别为「class名为stuff-child(2)的div元素」。
• 你的HTML里两个div的class都只有stuff，不存在class为stuff-child(2)的元素，这条蓝色背景的规则从头到尾没有命中任何元素，自然不会生效。两个div最终都命中了第一条div.stuff的规则，所以全部显示绿色。

根据你的使用场景选一种写法即可：

方案1：不修改HTML，用伪类直接匹配第二个元素 #

直接把错误的选择器改成正确的:nth-child()写法即可，完整CSS代码如下：

div.stuff {
  background-color: green;
  height: 250px;
}

/* 匹配同父节点下第二个、class为stuff的div元素 */
div.stuff:nth-child(2) {
  background-color: blue;
}

注意：这种写法的计数基准是元素父节点下的所有子元素，如果你后续在两个div之间插入其他标签，会导致选择器匹配错位。

方案2：给目标元素加专属class（最稳定） #

如果后续DOM结构可能调整，推荐直接给第二个div加一个专属class，不会因为结构变动失效：
修改后的HTML代码：

<div class="stuff">123</div>
<div class="stuff blue-bg">abc</div>

配套CSS代码：

div.stuff {
  background-color: green;
  height: 250px;
}

.blue-bg {
  background-color: blue;
}

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