Question

CSS3选择器可以非常深入，并且我遇到了使用SASS将两个人联系在一起的问题。

SASS：

$greymd: #a7aaac;
$blue: #405daa;
$orange: #cabc18;

#C05 {
    .tab:nth-child(2) {
        .num:nth-child(1) {
            position: absolute;
            top:200px;
            left:800px;
            color:$greymd;
         }
        .num:nth-child(2) {
            position: absolute;
            top:300px;
            left:800px;
            color:$blue;
        }
        .num:nth-child(3) {
            position: absolute;
            top:400px;
            left:800px;
            color:$orange;
        }
    }
}

HTML：

<body id="C05">
    <div class="tab-wrapper">

        <div class="tab active" data-slide="1">
            <div class="chart-wrapper">
                <div class="chart">
                  <div class="overflow">
                        <div class="arrow"></div>
                        <div class="lines"></div>
                        <div class="num">1</div>
                        <div class="num">2</div>
                        <div class="num">3</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab" data-slide="2">
            <div class="chart-wrapper">
                <div class="chart">
                    <div class="overflow">
                        <div class="arrow"></div>
                        <div class="lines"></div>
                        <div class="num">10</div>
                        <div class="num">20</div>
                        <div class="num">30</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab" data-slide="3">
            <div class="chart-wrapper">
                <div class="chart">
                    <div class="overflow">
                        <div class="arrow"></div>
                        <div class="lines"></div>
                        <div class="num">100</div>
                        <div class="num">200</div>
                        <div class="num">300</div>
                    </div>
                </div>
            </div>
        </div>     
    </div><!--/.tab-wrapper-->
</body>

问题是，如果我删除<div class='arrow'></div>和<div class='lines'></div>，它会按预期工作。显然，有一些关于nth选择器的东西我不知道。

Answer 1

错误确实与您预期使用nth-child有关。请使用以下CSS代码：

.num:nth-child(1)

此代码查找类.num，它是其父元素的第一个子。但是，代码中的第一个.num是其父元素的第三个子元素。

将多个n-child子选择器链接在一起

1 个答案: