css - 嵌套 CSS : How to get to the child?

Question

我有以下代码部分。我正在尝试对所有三个“三分之一”分类的 div 进行样式设置，而不对网站上的所有三分之一类进行样式设置。我想使用嵌套样式。我已经尝试了 ID 和类的各种组合，有和没有“>”，但我删除了。

我最后尝试的风格是:

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

失败。

<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. 第一个 child :.one-third:first-child 或 .one-third:nth-child(1)。
2. 第二个 child :.one-third:nth-child(2)。
3. 最后一个 child :.one-third:last-child 或 .one-third:nth-child(3)。