在css选择器中使用第n个子项（&N）

我尝试使用css来构建页面布局。我希望它尽可能独立于内容

想法是每行有4个div，我使用float:left for all div和：nth-child4n+1选择器清除：两者。有些div我希望在cr之前是第一行，我用class=cr标记它，但我希望它在cr之前的同一行后面有3个div清除：两者都有

目标是：

Test Test
Test Test Test Test 
Test Test Test Test

可能吗？ 到目前为止，我在这里：

HTML

拨弄

HTML

拨弄

---

据我所知，你想做的事情在纯css中是不可能的，但我很高兴被证明是错的

如果我对你的理解是正确的。。。你想在类的每个div之后重置第n个计数。cr，rigt

不幸的是，CSS不是这样工作的。每次分配新的第n条规则时，它将从一开始就应用于类型的所有元素。使用相邻的选择器+或~可以执行一些神奇的操作。。。例如，仅在第一次出现.cr类之后才开始使用第n个规则应用样式

但是没有办法在class.cr的每个div之后重置第n个计数器

您可以通过添加层次结构或使用javascript或服务器端动态分配特定类来实现这一点。。。但不是在纯css中

编辑：例如，如果使用jQuery，可以添加如下内容：

    var i=1;
    $("div").each(function(){
        if($(this).hasClass('cr') || i%5==0){
            $(this).addClass('cr');
            i=1;
        }
        i++;
    });

在css中应用明确：两者都有；到.cr类

---

以下是JSFIDLE中的示例：

据我所知，在纯css中不可能实现您想要做的事情，但我非常高兴被证明是错误的

如果我对你的理解是正确的。。。你想在类的每个div之后重置第n个计数。cr，rigt

不幸的是，CSS不是这样工作的。每次分配新的第n条规则时，它将从一开始就应用于类型的所有元素。使用相邻的选择器+或~可以执行一些神奇的操作。。。例如，仅在第一次出现.cr类之后才开始使用第n个规则应用样式

但是没有办法在class.cr的每个div之后重置第n个计数器

您可以通过添加层次结构或使用javascript或服务器端动态分配特定类来实现这一点。。。但不是在纯css中

编辑：例如，如果使用jQuery，可以添加如下内容：

    var i=1;
    $("div").each(function(){
        if($(this).hasClass('cr') || i%5==0){
            $(this).addClass('cr');
            i=1;
        }
        i++;
    });

在css中应用明确：两者都有；到.cr类

---

下面是JSFIDLE中的示例：

为什么不将这些行显式化？比如：

CSS

HTML

---

我在这里使用内联块是因为它要简单得多，但是如果元素之间的间隙是一个问题，您可以将它们浮动起来，或者。

为什么不将这些行显式化呢？比如：

CSS

HTML

---

我在这里使用内联块是因为它简单得多，但是如果元素之间的间隙是一个问题，您可以将它们浮动，或者。

我认为这是固定布局。我希望它是依赖于内容，它不知道在哪里额外的新行发生，如果有的话。我认为这不是他想要的答案。其中一个要求是让div浮动到左边，带有一个类。crI认为这是固定的布局。我希望它是依赖于内容，它不知道在哪里额外的新行发生，如果有的话。我认为这不是他想要的答案。其中一个要求是让div浮动到左边，类为.crs这是我发现自己的方式。。。但我想删除这个层次结构，并将css表示应用于平面数据这是我发现自己的方式。。。但我想删除这个层次结构，并将css表示应用于平面dataThanx，以供您回答。我以前遵循分层的方式，想知道数据是否可以是平面的。我试过像这样的选择器：DIV:not.cr:nth-of-type4n+1&DIV:not.cr+DIV:not.cr+DIV:not.cr+DIV:not.cr但它也不起作用：Thanx为你的答案。我以前遵循分层的方式，想知道数据是否可以是平面的。我尝试了如下选择器：DIV:not.cr:nth-of-type4n+1&DIV:not.cr+DIV:not.cr+DIV:not.cr+DIV:not.cr+DIV:not.cr但它也不能这样工作：

    var i=1;
    $("div").each(function(){
        if($(this).hasClass('cr') || i%5==0){
            $(this).addClass('cr');
            i=1;
        }
        i++;
    });

section > div { display: inline-block; background: green; }
section > div:nth-child(even) { background: blue; }

<section>
    <div>Test</div>
    <div>Test</div>
</section>
<section>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
</section>
<section>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
</section>