将多个第 n 个子选择器链接在一起[重复]答案

【问题标题】：Chaining multiple nth-child selectors together [duplicate]将多个第 n 个子选择器链接在一起[重复]
【发布时间】：2014-09-22 07:18:05
【问题描述】：

CSS3 选择器可以变得非常深入，我遇到了使用 SASS 将一对链接在一起的问题。

CODE

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 选择器有一些我不知道的东西。

【问题讨论】：

nth 选择具有相同父级的元素....它不会按类选择元素。 nth-child(1)总是是父类不管的第一个元素。

标签： css sass css-selectors

【解决方案1】：

错误确实与您对nth-child 的预期用途有关。采用以下 CSS 代码：

.num:nth-child(1)

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

【讨论】：