选择第四行div，删除边距

Question

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

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

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

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

Answer 1

如果您定位每个第4个div元素，则需要使用nth-of-type，其表达式为(4n+4)，因此它将选择每个第4个元素。

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

Demo

  

注意：我在这里使用了一般元素选择器，因此您需要添加一个   在使用名为.

的类时div之前的.div

Answer 2

此

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

应该有用。

但我认为你可以这样做：

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

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

Answer 3

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

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

Answer 4

@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提供保证金权利时，最后一个也有保证金，

所以你也可以这样做

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

Answer 5

有人用这个

发布了答案

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

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