CSS:n -child()选择器在PHP构建的站点中 - CSS :nth-child() selector in a PHP constructed site

CSS :nth-child() selector in a PHP constructed site

我有三个CSS规则来定义交替的样式，每三个项目重复一次:

.container:nth-child(3n):after {
    /* Styleset 1 */
}
.container:nth-child(3n-1):after {
    /* Styleset 2 */
}
.container:nth-child(3n-2):after {
    /* Styleset 3 */
}

这些在简单的静态HTML页面中工作完美。

然而，一旦应用到使用PHP foreach循环编写多个div.container的网站，样式不再交替。显然，现在只有nth-child(3n-2)样式被应用于所有 .container s。PHP是这样的:

<?php foreach ($articles as $article) { ?>
    <div class="container">
        <!-- Content creation -->
    </div>
<?php } ?>

这是怎么发生的?

如果n是第一个子元素，(3n-2)将计算为(3-2 = 1);显然，这些div中的最后一个现在都是其父元素的第一个(因此也是唯一的)子元素。如果没有看到代码的其余部分，我无法确切地告诉你要修复什么(这个循环是否在另一个循环中，为每个循环创建父循环?)，但你可能必须将该循环向上移动一个级别，或者以其他方式确保所有的。container都被创建为兄弟姐妹，而不是单独的单个子。

对于将来调试第n个子问题的帮助，这很方便:http://css-tricks.com/examples/nth-child-tester/