首先咱们先把你的HTML结构拆解清楚，这样能更直观地看到层级关系：

<div class="box"> 
  <!-- #1 -->
  <div> 
    <!-- #2 -->
    <div> 
      <!-- #3 -->
      <div> 
        <!-- #4 -->
        <div></div> <!-- #5 -->
        <div></div> <!-- #6 -->
        <div></div> <!-- #7 -->
      </div> 
    </div> 
  </div> 
</div>

你已经用.box div div div {}定位到了#4，那要选中它里面的#5、#6、#7，有几种灵活的写法，看你的需求来选：

• 选中#4的所有直接子div（也就是#5、#6、#7全部）
  用CSS的子选择器>，它只会匹配父元素的直接子元素，不会选中更深层的嵌套div。写法是：

  .box div div div > div {}
  

  这个选择器的意思是：找到.box下三层的div（也就是#4），然后选中它的所有直接子div，正好就是#5、#6、#7。

• 单独定位某个特定的子div
  如果只想给#5、#6、#7中的某一个设置样式，可以用结构伪类：

  • 选中#5（第一个子div）：

    .box div div div > div:first-child {}
    

  • 选中#6（第二个子div）：

    .box div div div > div:nth-child(2) {}
    

  • 选中#7（第三个子div，或者最后一个）：

    .box div div div > div:nth-child(3) {}
    /* 或者用:last-child，不管有多少个子元素，都选最后一个 */
    .box div div div > div:last-child {}
    

另外补充个小技巧：如果以后层级变多，这种多层div的选择器会很冗长，你可以给关键的父元素加个类名（比如给#4加个class="inner-box"），这样选择器就能简化成.inner-box > div，维护起来更方便——当然如果不能加类名的话，上面的方法就完全够用啦。

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