html - 选择每 4 个 <div>

Question

我有很长的 DIV 行，我需要使用第 n 个子选择器更改每第 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){