兄弟选择器CSS

Question

我有一个页面具有以下结构.我想为每个"componet-4"应用背景颜色,但是只想为第一个元素"componet-4"应用不同的颜色.如何指出其他人的第一个元素.我也要支持IE7和IE8.我不能使用Javascript,我想通过使用css实现它,它可能吗？请指教.

 <html>
 <body>
 <div id="component-1">

 <div class="component-2">
    <div class="component-3">
     <div class="component-4">  
    </div>
    </div>    
  </div>


  <div class="component-2">
    <div class="component-3">
     <div class="component-4">  
    </div>
    </div>    
  </div>

  <div class="component-2">
    <div class="component-3">
     <div class="component-4">  
    </div>
    </div>    
  </div>  

</div>

 </body>
 </html>

请指教我..

Answer 1

使用伪类 first-child

.component-4{
  background:red
}
.component-2:first-child .component-4{
  background:green
}

DEMO