0

我有四个相同的元素，我想以不同的方式设置样式。我的 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 类，但这似乎也不起作用。谁能让我知道我哪里出错了？

4

2 回答 2

1

clientcontainer作为类成员的每个元素都是其父元素的第一个子元素。

选择器是 nth child，而不是文档中的 nth 。

您可以wpb_wrapper使用后代组合器根据元素的位置进行定位。

于 2020-06-06T15:17:21.763 回答
0

:nth-child()伪类计算兄弟姐妹。你不计算兄弟姐妹。您正在计算cousins，因为您要定位的每个元素都是父兄弟姐妹的孩子。

试试这个：

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

更新：问题已修改。HTML 已更改。这是现在的解决方案：

.clientcontainer:nth-child(1) { height: 20px; background: orange; }
.clientcontainer:nth-child(2) { height: 20px; background: lightgreen; }
.clientcontainer:nth-child(3) { height: 20px; background: aqua; }
.clientcontainer:nth-child(4) { height: 20px; background: pink; }
<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>

于 2020-06-06T15:19:03.517 回答