选择行中的第四个 div，删除边距 [重复]答案

【问题标题】：Select fourth div in row, remove margin [duplicate]选择行中的第四个 div，删除边距 [重复]
【发布时间】：2013-07-25 00:03:02
【问题描述】：

假设我有 860px 宽度的区域，我需要在其中放置 4 个 div（200px 宽度）和它们之间的 3 个空格（20px）。如果只有 4 个 div，我可以使用

.div {width:200px; margin-right:20px}
.div:last-child {margin-right:20px;}

但是可以有任意数量的 div，但只有 for 到一行，所以我不能使用 last-child。但是一条线的宽度总是860px。

如何从第四个 div 中删除 margin-right？或者如何正确设置这个间距？

【问题讨论】：

【解决方案1】：

@Mr.外星人给出了最好的答案。但在你的情况下，你也可以这样做（就像你的全宽一样）

<div id="main">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
</div>

当你给#main > div的margin-right时，最后一个也有margin，

所以你也可以这样做

#main{margin-right: -10px; /*what margin you have given to #main > div */}

【讨论】：

【解决方案2】：

有人对此发表了答案

.div + .div{margin-left:20px;}

但删除它。它对我有用，看起来不错。这样做是否正确？

【讨论】：

【解决方案3】：

这个

.div:nth-child(4){margin-right:0px;}

应该可以。

但我认为你可以这样做：

.div{margin-left:20px;}
.div:first-child{margin-left:0px;}

因为第一个元素永远不会改变。

【讨论】：

【解决方案4】：

所以你需要的是一个网格系统，使用nth-child：

div{margin-left:20px;}
div:nth-child(3n+1) {
margin-left: 0;
}

【讨论】：

【解决方案5】：

如果您的目标是每 4 个 div 元素，则需要使用 nth-of-type 和 (4n+4) 表达式，这样它将选择每 4 个元素。

div:nth-of-type(4n+4) {
    color: red;
}

注意：这里使用的是通用元素选择器，所以你需要添加一个 . 在 div 之前，因为您正在使用名为 .div 的类

【讨论】：

为什么不是第 n 个孩子，为什么是第 n 个类型？这也有效jsbin.com/olofug/1/edit
@user1721135 nth-of-type 和nth-child 有不同的含义，如果你有一个不是div 的元素，nth-child 会选择那个，这里它会选择@987654334 的元素@在这种情况下，你可以说它就像一个特定的选择，nth-child是松散的一个