css - 样式嵌套 div 没有指定类名

Question

我想更改嵌套 div 的样式，如下例所示:

<div class="box">  #1
  <div>            #2
    <div>          #3
     <div>         #4
       <div></div> #5
       <div></div> #6
       <div></div> #7 **How to style this div when class name is not present?**
     </div>
    </div>
  </div>
</div>

我能够以这种方式访问​​ div #4:

.box div div div {}

但是访问div #5 #6 #7的方法是什么？

Answer 1

要访问 #7，您有两个或三个选项全部，它们使用直接后代选择器 > 将上下文限制为 #4 div 的子级。

.box div div div > div:last-of-type{}
/* assumes there are no additional divs after #7 */

或

.box div div div> div:last-child {} 
/* assumes that the div is, in fact, the last child

甚至

.box div div div> div:nth-child(3) {}
/* assumes that the 3rd child is a div */