使用nth-child伪类为container2内元素设置样式出错，求解决

现有代码 #

CSS代码 #

.box1 {
  background-color: red;
  height: 100px;
  width: 100px;
  margin-bottom: 10px;
}

.box2,
.box3,
.box4 {
  height: 100px;
  width: 100px;
  margin-bottom: 10px;
}

HTML代码 #

<div class="container1">
  <div class="box1">1a</div>
  <div class="box1">1b</div>
  <div class="box1">1c</div>
</div>

<div class="container2">
  <div class="box2">2</div>
  <div class="box3">3</div>
  <div class="box4">4</div>
</div>

需求 #

使用nth-child伪类为container2内的box2、box3、box4分别设置黄色、绿色、紫色背景色。已知类选择器可以实现该效果，但以下两种写法均失效：

写法一（错误） #

.container2:nth-child(1) {
    background-color: yellow;
}

.container2:nth-child(2) {
    background-color: green;
}

.container2:nth-child(3) {
    background-color: purple;
}

问题表现：整个container2容器变为绿色。

错误原因：.container2:nth-child(n)的逻辑是「选中父元素（此处为<body>）下的第n个子元素，且该元素的类为container2」。而container2本身是<body>的第2个子元素（前面还有container1），所以.container2:nth-child(2)会直接选中整个container2容器，给它设置绿色背景，而非容器内的子元素。

写法二（错误） #

div:nth-child(1) {
    background-color: yellow;
}

div:nth-child(2) {
    background-color: green;
}

div:nth-child(3) {
    background-color: purple;
}

问题表现：样式混乱，多个无关元素被染色。

错误原因：div:nth-child(n)是全局匹配所有父元素下的第n个<div>元素。比如：

• div:nth-child(1)会匹配<body>下的第1个<div>（即container1）、container1下的第1个<div>（box1）、container2下的第1个<div>（box2）；
• div:nth-child(2)会匹配<body>下的第2个<div>（container2）、container1下的第2个<div>（box1）、container2下的第2个<div>（box3）；
  最终导致多个不相关元素被设置背景色，样式混乱。

正确写法 #

要精准选中container2内的子元素，需要将nth-child的作用范围限定在container2内部，写法如下：

.container2 > div:nth-child(1) {
    background-color: yellow;
}

.container2 > div:nth-child(2) {
    background-color: green;
}

.container2 > div:nth-child(3) {
    background-color: purple;
}

这里的.container2 > div:nth-child(n)表示「选中container2下的第n个直接子元素<div>」，精准定位到目标元素，不会影响其他区域。

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