嵌套的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類。