html - 无法修复第 n 个子边距

Question

我有一定数量的 div 类“盒子”漂浮在彼此旁边。通过使用 nth-child(4n+1) 选择器，每个第 4n+1 个 div 都有一个额外的左边距，可以将其推离到边界。可以有无限数量的 div 类“盒子”。

现在的问题是，在某些情况下，div 类“特殊”是在第 4n 个元素之后动态添加的。这当然会导致下一个 box-div 失去他们想要的位置。因此，我尝试了 nth-of-type 没有成功。

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="special"></div>
<div class="box"></div>

第 n 个孩子的 CSS：

 .box:nth-child(4n+1){
  margin-left:25px;   
}

因为我对 nth-child 和 nth-of-type 选择器不太熟悉。所以我很确定我忽略了一些东西。不能为每个 4n+1 box-div 添加一个额外的类。我正在寻找一个CSS解决方案

编辑：尚未提供的答案设法解决了特殊 div 之后的 1 行。但是还有多个： “特殊”之后的示例多行

希望尽可能多的浏览器兼容性。

score 2 · Accepted Answer

怎么样

.special + .box, 
.box:nth-child(4n+1) {
    margin-left:25px;
}

如果你改变

<div class="special"></div>

到别的东西

<p class="special"></p>

然后下面的代码将完全符合您的要求（直到 IE8 才有效）

.special + .box, 
.box:nth-of-type(4n+1) {
    margin-left:25px;
}

score 1 · Accepted Answer

改为使用

div > .box:first-child, 
.special + .box {
     margin-left:25px;   
}

它比有点老式nth-*，但它甚至可以在IE7

2 回答 2