为何:nth-child(1)给整个body元素加背景色而非仅作用于div？

你的问题核心是对:nth-child(1)选择器的作用逻辑理解有误：

• :nth-child(1) 是全局选择器，它会匹配所有元素中，属于其父元素第一个子元素的节点——不对元素标签做任何限定。
• 你预期它选中body的第一个子元素（div），这点确实成立：div作为body的第一个子元素，会被该选择器命中并应用蓝色背景。
• 你看到“整个body背景变蓝”，是因为：
  1. div是块级元素，默认宽度占满父容器（body）；
  2. body默认背景为透明，且高度由内容撑开（和div高度完全一致）；
  3. 因此div的蓝色背景会完全覆盖body的可视区域，让你误以为是body本身变蓝。
• 你提到“body是html的第二个子元素”，这点和当前现象无关——因为:nth-child(1)不会选中body（它并非html的第一个子元素）。

如果只想给body的第一个子元素（div）设置样式，需要给选择器添加范围限定：

/* 选中body下的第一个子元素（不限标签类型） */
body > :nth-child(1) {
  background-color: blue;
  color: aliceblue;
}

/* 或者更精确地选中body下的第一个div元素 */
body > div:nth-child(1) {
  background-color: blue;
  color: aliceblue;
}

这样就只会给目标div设置背景色，不会出现混淆的视觉效果。

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