CSS : PHP构建站点中的nth-child()选择器

Question

我有三个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循环编写多个div.container的网站，样式就不再交替。显然，现在只有nth-child(3n-2)样式应用于所有.container。

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

这是怎么发生的？

Answer 1

如果n是第一个子变量，则(3n-2)将计算为(3-2 = 1)；显然，所有这些div中的每一个现在都是其父母的第一个(因此也是唯一的)子。如果不看到其余代码(这个循环在另一个循环中为每个循环创建一个父循环吗？)，我无法确切地告诉您要修复什么，但是您可能必须将该循环向上移动一个级别，或者以其他方式确保您的所有.containers都是作为兄弟创建的，而不是像单独的独生子女那样孤独。

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