时间戳

首页 > 解决方案 > 为什么我的第 n 个子 CSS 选择器不起作用？

html - 为什么我的第 n 个子 CSS 选择器不起作用？

问题描述

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

标签： htmlcsscss-selectors

解决方案

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

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

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

推荐阅读