Question

我的设置类似于

<div class="charts">Content</div>
<div class="tables">Content</div>
....
<div class="charts">Content</div>
<div class="tables">Content</div>

重复几次。我的CSS如下

.left {
    width: 32%;
    float: left;
    margin: 5px;
}
div.tables:nth-child(3n+4) {
        clear: both;
        background-color:red;
}
 div.charts:nth-child(3n+4) {
        clear: both;
        background-color:green;
}

使用jQuery，我最初使用charts类隐藏所有DIV元素并使用点击功能，然后显示所有charts并隐藏所有tables DIV。 CSS

然而，在加载页面时会发生什么，名为charts的DIV元素仍然被识别，这意味着显示了第一个tables DIV，然后有两个空白的插槽，我想要另外两个DIV正在显示tables的类。

希望这个jsfiddle有意义http://jsfiddle.net/gyjJU/3/和http://jsfiddle.net/gyjJU/4/

Answer 1

我认为你可以通过更改CSS选择器来考虑隐藏的交替元素来获得你想要的结果：

div.tables:nth-child(6n+8) {
    clear: both;
    background-color:red;
}
div.charts:nth-child(6n+7) {
    clear: both;
    background-color:green;
}

http://jsfiddle.net/mblase75/gyjJU/5/

具有多个Div的CSS nth查询

1 个答案: