排除特定班級的第n個孩子計數器

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%; 
     } 
    } 
} 

我試過使用：不是選擇器，但計數器計數.box - 完整無論如何。

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%; 
    } 
}