1

我有一盒选择器，它们都共享这个类。widgetContainer可以在一行中容纳 3 个 div，然后再放入下一行。我nth-child(3n+0)用来从每个 3rd div 的右侧取出边距，允许我在前 2 个 div 中添加更多 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;
}

在 JSFiddle 上

我可以用 CSS 做的是让widgetBox边距为30px 30px 10px 0，但这在不支持的浏览器中不起作用nth-child，它将强制每行有 2 个 div，因为边距尚未从第 3 个 div 中删除。

如果您需要更多说明，请告诉我！

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

4

1 回答 1

3

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

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

.widgetBox:nth-child(3n+2) {
    margin: 30px 30px 10px 0;
}
于 2012-04-05T15:20:25.643 回答