选择每4个<div>

Question

我有很长的DIV系列,我需要使用nth-child选择器在每第4个DIV上更改填充,但是我在使用它时遇到了问题.

这是我的css:

.content_tab {
    width: 220px;
    height: 340px;
    margin-right: 20px;
    margin-bottom: 20px;
    float: left;
    background-color: #0F0;
}
.content_tab:nth-child(4){
    background-color: #F00;
    margin-right: 0px;
}

这是我的HTML:

<div class="content">
    <div class="content_tab"></div>
    <div class="content_tab"></div>
    <div class="content_tab"></div>
    <div class="content_tab"></div>
    <div class="content_tab"></div>
    <div class="content_tab"></div>
    <div class="content_tab"></div>
</div>

有任何想法吗？

Answer 1

你应该改变

.content_tab:nth-child(4){

至

.content_tab:nth-child(4n){

如此处所述http://css-tricks.com/how-nth-child-works/

或者,如果您不想选择第一个div,则需要

.content_tab:nth-child(4n+4){

Answer 2

.content div:nth-child(4n) {  /* selects 4, 8, 12, 16, etc. */
    padding: 10px;
}

http://jsfiddle.net/y6vfg/1/

或者如果你想从第一个元素开始,你可以使用:

.content div:nth-child(4n + 1) { /* selects 1, 5, 9, 13 .. */
    padding: 10px;
}

http://jsfiddle.net/y6vfg/7/

Answer 3

要获取选择器中的每 4 个元素，请使用4n

.content_tab:nth-child(4n){
    background-color: #F00;
    margin-right: 0px;
}

小提琴示例

请注意，我在小提琴中缩小了 div 大小，这样更容易看到它的工作情况。