为什么我的第n个子CSS选择器不起作用？ [重复]

Question

此问题已经在这里有了答案：

Why doesn't nth-of-type/nth-child work on nested elements? （1个答案）

[3天前关闭。

我有四个相同的元素，我想以不同的方式设置样式。我的HTML如下，我要使用的类是clientcontainer类。

<div class="wpb_wrapper">
    <div class="wpb_column vc_column_container vc_col-sm-3 clientcontainer">
        <div class="vc_column-inner">
            <div class="wpb_wrapper">
                <div class="client">
                    <a href="#">
                        <img src="#" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="wpb_column vc_column_container vc_col-sm-3 clientcontainer">
        <div class="vc_column-inner">
            <div class="wpb_wrapper">
                <div class="client">
                    <a href="#">
                        <img src="#" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="wpb_column vc_column_container vc_col-sm-3 clientcontainer">
        <div class="vc_column-inner">
            <div class="wpb_wrapper">
                <div class="client">
                    <a href="#">
                        <img src="#" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="wpb_column vc_column_container vc_col-sm-3 clientcontainer">
        <div class="vc_column-inner">
            <div class="wpb_wrapper">
                <div class="client">
                    <a href="#">
                        <img src="#" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

然后我添加了以下CSS

.clientcontainer:nth-child(1) {margin-top:0px; };
.clientcontainer:nth-child(2) {margin-top:100px; };
.clientcontainer:nth-child(3) {margin-top:300px; };
.clientcontainer:nth-child(4) {margin-top:200px; };

但是，当我运行它时，我仅发现第一个clientcontainer类已设置样式，而在其他类上则无效。我尝试在所有这些元素之前添加wpb_wrapper类，但这似乎也不起作用。谁能让我知道我要去哪里了？

Answer 1

:nth-child()伪类计数兄弟姐妹

Answer 2

<div class="wpb_wrapper">
  <div class="wpb_column vc_column_container vc_col-sm-3 clientcontainer">
    <div class="vc_column-inner">
      <div class="wpb_wrapper">
        <div class="client">
          <a href="#">
            <img src="#" alt="">
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="wpb_column vc_column_container vc_col-sm-3 clientcontainer">
    <div class="vc_column-inner">
      <div class="wpb_wrapper">
        <div class="client">
          <a href="#">
            <img src="#" alt="">
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="wpb_column vc_column_container vc_col-sm-3 clientcontainer">
    <div class="vc_column-inner">
      <div class="wpb_wrapper">
        <div class="client">
          <a href="#">
            <img src="#" alt="">
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="wpb_column vc_column_container vc_col-sm-3 clientcontainer">
    <div class="vc_column-inner">
      <div class="wpb_wrapper">
        <div class="client">
          <a href="#">
            <img src="#" alt="">
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

类的每个元素都是其父元素的first