Question

我有这段代码：

<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>

和css：

.post {position:relative;float:left;margin-right:10px;}

我需要每个3 div.post，第三个有margin-right：0px;

Answer 1

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

Answer 2

对于现代浏览器，纯CSS nth-child选择器就足够了：

.post:nth-child(3n) { /* not zero-based */
    margin-right: 0px;
}

http://jsfiddle.net/mblase75/EQacc/

如果在第一个div.post之前还有其他同级元素，则您需要使用nth-of-type代替：

.post:nth-of-type(3n) {
    margin-right:0px;
}

http://jsfiddle.net/mblase75/4vnjt/

对于旧版浏览器（包括IE8及之前版本），需要使用一些JavaScript。我会使用jQuery为每三个项添加一个类，并将该类添加到我的CSS：

.post.thirdchild, .post:nth-child(3n) {
    margin-right: 0px;
}

jQuery的：

$('.post:nth-of-type(3n)').addClass('thirdchild');

http://jsfiddle.net/mblase75/Tf9ky/

为什么包括两者？好吧，有些用户可能关闭了JavaScript。

事实上，如果您担心IE＆lt; 8，理想的解决方案可能是将0px设为默认保证金，这样帖子就不会溢出他们的容器：

.post {
    position: relative;
    float: left;
    margin-right: 0px;
}
.post.notthirdchild,
.post:nth-child(3n+1), 
.post:nth-child(3n+2) {
    margin-right: 10px;
}

JS：

$('.post:nth-child(3n+1),.post:nth-child(3n+2').addClass('notthirdchild');

http://jsfiddle.net/mblase75/nBLxc/

Answer 3

var i = 0;
$('.post').each(function(){
    i++;
    if(i%3==0){
        $(this).css('margin-right', '0');
    }
});

Answer 4

$(".post:nth-of-type(3n)").css("margin-right", "0");

http://jsfiddle.net/fabricis/7GUwQ/

Answer 5

以下是使用jQuery＆＃39; filter()的方法以及每个项目索引的模数。

索引是从0开始的，因此我在每个索引中添加一个。

$('.post').filter(function (index) {
    return ((index + 1) % 3 == 0 ? 1 : 0)
}).css('margin-right', '0px');

http://jsfiddle.net/XF5hS/

编辑：

对于纯CSS解决方案，请参阅此页面上的nth child解决方案。

失败：
如果要动态生成div，可以只为每三个项添加一个类。如果它们不是动态的，您仍然可以将类硬编码为每三个项目。

这样的事情：

<div class="post"></div>
<div class="post"></div>
<div class="post no-margin"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post no-margin"></div>

div.post.no-margin {
  margin-right:0px;
}

删除保证金每3个div

5 个答案:

编辑：