Question

我想从第一个.box开始选择容器的孩子而没有班级.box--full。

在我的情况下，这个box--full无法存在，因此，nth-child选择器不一样，而且我被困在这里......

<!-- Example with one full box -->
<div class="container">
    <div class="box box--full">full</div>
    <div class="box">box 1</div>
    <div class="box">box 2</div>
    <div class="box">box 3</div>
    <div class="box">box 4</div>
    ...
</div>

<!-- Example without full box -->
<div class="container">
    <div class="box">box 1</div>
    <div class="box">box 2</div>
    <div class="box">box 3</div>
    <div class="box">box 4</div>
    ...
</div>

这是我的CSS在没有盒子的情况下工作 - 完整。

.container {
    .box {
        &:nth-child(3n+1) {
            padding-right: 2%;
        }
        &:nth-child(3n+2) {
            padding: 0 2%;
        }
        &:nth-child(3n+3) {
            padding-left: 2%; 
        }
    }
}

我尝试使用：not selector但计数器仍然计算.box - full。

Answer 1

实际上，我找到了解决方案，我不得不使用~选择器。我想我的问题不是明确的dippas。我必须选择特定的孩子来设置特定的填充。

在你的代码片段中，无论是第一个，第二个还是第三个孩子，你都会将属性应用于每个孩子。所以你无法看到我的问题，但谢谢你:)！

.box {
    &:nth-child(3n+1) {
        padding-right: 4%;
    }
    &:nth-child(3n+2) {
        padding: 0 2%;
    }
    &:nth-child(3n+3) {
        padding-left: 2%; 
    }
    &.box--full {
        padding-right: 0;
    }
    &.box--full ~ .box:nth-child(3n+2) {
        padding-right: 2%;
        padding-left: 0;
    }
    &.box--full ~ .box:nth-child(3n+3) {
        padding: 0 2%;
    }
    &.box--full ~ .box:nth-child(3n+4) {
        padding-right: 0;
        padding-left: 2%;
    }
}

nth-child counter不包括特定班级

1 个答案: