PHP构造站点中的CSS:nth-child（）选择器

我有三个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

s的网站，样式就不再交替。显然，现在只有第n个子（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个子问题的未来帮助，这很方便：

很可能动态输出的HTML在结构上有所不同，所以请与静态工作版本进行比较。下一个明智的步骤是在中简单地检查它是否有错误。它们实际上不再是兄弟元素，现在在所有容器元素前面插入了一个新的title元素。不管他们是兄弟姐妹，都没有办法以正确的顺序瞄准他们吗？我猜

nth-of-type（）

将是一个选项，我将尝试并报告。

nth-of-type（）

的工作原理非常类似于

nth-child（）

——将其视为“类型的第n个孩子”。如果他们仍然是兄弟姐妹，但不再是他们父母的独生子女，这就行了。也许你可以试试你的第n个孩子的父母是什么产生的？我根本不知道为什么要生成标题元素——它们应该在每个文档中只出现一次，在

中。对不起，我指的不是实际的

元素。我当前的DOM现在看起来是这样的：我有一个包装

div#content

，在这个元素中有两个交替的div，一个是我想要定位的div，另一个是另一个div。但是我猜我必须把每一对都打包成一个包含div的部分，然后一切都会恢复正常。