如何在与 nth-child 的混合中 select 只有 parent 的前两个 children？，而不是每个第一个和第二个

Question

如何 select 只 child 一个 parent 的前两个 children（不是每个第一个和第二个 child）。在 .scss 混入中使用 nth:child select 或?

这是我的代码，它不起作用，因为它 select 每秒 div。但是我只需要 select col_l 作为 :nth-child(1) 和 col_r 作为 :nth-child(2).

html:

<section id="section" class="clearfix">
    <div class="col_l">     <!-- this is div:nth-child(1) -->
        <div class="title">
             Left col
        </div>
        <div></div>
        <div></div>  <!-- this div is also selected as a :nth-child(2), but it is wrong -->
    </div>
    <div class="col_r">   <!-- this is div:nth-child(2) -->
        <div class="title">
            Right Col
        </div>
    </div>
</section>

.scss:

@mixin two-col($width-left, $width-right) {
    @include clearfix;
    div:nth-child(1) {
        float: left;
        width: $width-left;
    }
    div:nth-child(2) {
        float: right;
        width: $width-right;
    }
}

#section {
    @include two-col(714px, 237px);
    background-color: #749675;
    .col_l { }
    .col-r { }
}

如何select 只第一个和只第二个div？不是每个。

Answer 1

您需要将子组合器 > 添加到混入中的 selector 以确保您实际上 select 只是 #section 的子组合而不是任何其他后代：

@mixin two-col($width-left, $width-right) {
    @include clearfix;
    > div:nth-child(1) {
        float: left;
        width: $width-left;
    }
    > div:nth-child(2) {
        float: right;
        width: $width-right;
    }
}

如何在与 nth-child 的混合中 select 只有 parent 的前两个 children？，而不是每个第一个和第二个

How to select only first two children of a parent in a mixin with nth-child?, not every first and second

css

css-selectors

sass

compass