html - 兄弟选择器 CSS

标签 html css css-selectors

我有一个具有以下结构的页面。我想为每个“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>

请多多指教..

最佳答案

使用伪类first-child

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

DEMO

关于html - 兄弟选择器 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20854528/

相关文章:

HTML:删除 a:hover for images?

html - 无法下载自己的图标

javascript - CSS white-space nowrap 似乎不起作用,可能是不同的问题?

javascript - 禁用网页的浏览器缓存,不适用于 IE

jquery - 在 CSS 或 jquery 中选择直系兄弟?

html - 内联 SVG <use> 删除之前的 :hover fill

jquery - 传单弹出内容上的点击事件

html - 仅当跨度位于 <a> 中且类不为 "folder"时,如何才能使我的 CSS 工作?

css - 选择表中的第一个列表 - CSS first-child?

javascript - 禁用特定下拉值上的按钮