有什么像.selector：not：nth-​​child（公式）？

Question

我有一盒选择器共享课程。在进入下一行之前，widgetContainer可以在一行中保存3个div。我正在使用nth-child(3n+0)从每个第3个div的右侧取下边距，允许我为前2个添加更多10px的边距（这使得div恰好适合容器）。

但我想知道的是，如果有一种方法可以定位nth-child(3n+0)并删除边距，但是然后定位，作为示例:not:nth-child(3n+0)，以允许我添加额外的10px边距那？这允许我保持我的CSS相同，如果不支持伪选择器，那么它会降级很好。

让我告诉你我的代码：

HTML

<div class="widgetContainer">
    <div class="widgetBox">
        <dt>Title</dt>
        <dd>Lorem Ipsum..</dd>
    </div>
    <div class="widgetBox">
        <dt>Title</dt>
        <dd>Lorem Ipsum..</dd>
    </div>
    <div class="widgetBox">
        <dt>Title</dt>
        <dd>Lorem Ipsum..</dd>
    </div>
    <div class="widgetBox">
        <dt>Title</dt>
        <dd>Lorem Ipsum..</dd>
    </div>
    <div class="widgetBox">
        <dt>Title</dt>
        <dd>Lorem Ipsum..</dd>
    </div>
    <div class="widgetBox">
        <dt>Title</dt>
        <dd>Lorem Ipsum..</dd>
    </div>
</div>

CSS

.widgetBox {
    width: 300px;
    height: auto;
    float: left;
    margin: 30px 20px 10px 0;
    border: 3px solid #e4e4e4;
}
.widgetBox:nth-child(3n+0) {
    margin: 30px 0 10px 0;
}

On JSFiddle

我可以使用CSS做的是widgetBox的余量为30px 30px 10px 0，但这不适用于不支持nth-child的浏览器，它会强制执行由于保证金尚未从第3个div中删除，因此每行为2个div。

如果您需要更多说明，请与我们联系！

注意 - 我真的不想使用jQuery，但如果它是必需的，请告诉我，我一定会考虑使用它！

Answer 1

没有选择器..只需添加两个样式：

.widgetBox:nth-child(3n+1) {
    margin: 30px 30px 10px 0;
}

.widgetBox:nth-child(3n+2) {
    margin: 30px 30px 10px 0;
}