css - 选择行中的第四个 div，删除边距

Question

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

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

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

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

score 6 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

<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 */}

score 0 · Accepted Answer

这个

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

应该管用。

但我认为你可以简单地做：

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

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

score 0 · Accepted Answer

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

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

score -1 · Accepted Answer

有人已经发布了这个答案

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

但删除了它。它对我有用，看起来不错。这是正确的方法吗？

5 回答 5