20

我有一长串 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>

有任何想法吗？

4

3 回答 3

43

你应该改变

.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){
于 2013-06-05T19:37:31.490 回答
12 
.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/

于 2013-06-05T19:35:34.353 回答
4

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

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

示例小提琴

请注意，我在小提琴中使 div 尺寸更小，以便更容易看到它的工作。

于 2013-06-05T19:35:31.513 回答