Question

我有以下代码部分。我试图对所有三个“三分之一”的入级div进行设计，而不对网站上的所有三分之一类进行样式设置。我想用嵌套的样式。我已经尝试过各种各样的ID和类的组合，无论有没有'＆gt;'，但我都很惊讶。

我尝试的最后一种风格是：

<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元素。

如果你想匹配：

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

Answer 2

取决于您要选择的班级one-third的第n个元素：

.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;
}

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

嵌套CSS：如何找到孩子？

3 个答案: