无法修复n-child边距

Question

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

现在的问题是，在某些情况下，在第4n个元素之后动态添加div类“特殊”。这当然会导致下一个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>

nth-child的Css：

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

因为我对nth-child和nth-of-type选择器不熟悉。所以我很确定我会忽略一些东西。 为每个4n + 1 box-div添加额外的类不是一种选择。我正在寻找一个css-solution

Example without "special" div

Example with "special" div

编辑：提供的答案设法在特殊div之后解决了1行。但网有多个： Example multiple rows after "special"

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

Answer 1

怎么样

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

演示：http://jsfiddle.net/VdJmC/6/

如果你改变了

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

到

之类的东西

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

然后下面的代码将完全按照您的要求完成（直到IE8才能工作）

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

演示 - http://jsfiddle.net/VdJmC/11/

Answer 2

改为使用

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

它有点旧式而不是nth-*，但它甚至可以在IE7上运行