嵌套的CSS：如何到达孩子？

Question

我有以下代码段。我试图对所有三个“三分之一”分类的div进行样式设计，而没有在网站上设计所有三分之一的样式。我以为使用嵌套风格。我已经尝试了各种ID和类的组合，无论是否使用'>'，但都是醒目的。

最后的风格我想是：

<style> 
    .widget_service > .container > .column > .one-third { 
      background-color: #ececec !important; 
    } 
</style> 

FAIL。

<section id="ultimate_service_widget-2" class="widget widget_service"> 
    <div class="container clearfix"> 
     <div class="column display-center clearfix"> 
       <div class="one-third"></div> 
       <div class="one-third"></div> 
       <div class="one-third clearfix-half"></div> 
     </div> 
    </div> 
</section> 

我错过了什么？

Answer 1

您当前的选择器会选择您的.column元素的任何直接子元素。有了这个，这匹配所有三个.one-third元素。

如果要匹配：

1. 第一个孩子：.one-third:first-child或.one-third:nth-child(1)。
2. 第二个孩子：.one-third:nth-child(2)。
3. 最后一个孩子：.one-third:last-child或.one-third:nth-child(3)。

Answer 2

根据类的其第n个元素one-third要选择：

.widget_service > .container > .column > .one-third:nth-child(2) { }

上面的代码将选择第二选择。

http://www.w3schools.com/cssref/sel_nth-child.asp

Answer 3

由于ID应该是唯一的，你可以只使用：

#ultimate_service_widget-2 .one-third{ 
    background-color: #ececec; 
} 

您可能需要更具体的，如果有在ultimate_service_widget-2 ID下更one-third类。