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 */

Answer 2

使用纯CSS，您可以使用伪类:last-child

＆＃13;

div.box > div > div > div > div:last-child {
  color:red;
}

＆＃13;

<div class="box">  
  <div>            
    <div>          
     <div>         
       <div>5</div> 
       <div>6</div> 
       <div>7</div> 
     </div>
    </div>
  </div>
</div>

＆＃13;

Answer 3

如果最后三个div元素真的没有内容，那就有一个捷径：

.box div:empty:after { content: 'I am empty'; } /* all of them */

.box div:empty:nth-child(1):after { content: 'Child 1'; } /* specific */

Answer 4

您可以通过以下css行

来实现此目的

.box div:nth-child(3) {
  border: 1px solid red;
}

<div class="box">  
  <div>   
  1
    <div>  
      2
     <div>    
       3
       <div>&nbsp;&nbsp;&nbsp;4</div> 
       <div>&nbsp;&nbsp;&nbsp;5</div> 
       <div>&nbsp;&nbsp;&nbsp;7</div>
     </div>
     
    </div>
    
  </div>
  
</div>

样式嵌套的div没有指定类名

4 个答案: