如何修改这种格式的样式？

Question

<div class="box">
   <div>
     <div>
       <div>
         <div></div>
       </div>
     </div>
   </div>
</div>

如何修改box下面的子孙div的样式，比如子color:#ccc,孙color#000

Answer 1

使用> 子代选择器

.box>div {
color:#ccc
}
// 子代的子代就是孙
.box>div>div {
color#000
}

不如直接类名了

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

简单的使用 stylus 写一下

.box
  // 所有后代
  div
    padding 10px
    border 1px solid red
  // 仅子集
  > div 
    border 1px solid blue
    // 仅孙级
    > div
      border 1px solid green

转换成CSS就是这样的：

.box div {
  padding: 10px;
  border: 1px solid red;
}
.box > div {
  border: 1px solid blue;
}
.box > div > div {
  border: 1px solid green;
}

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。