PHP構造站點中的CSS：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 foreach循環編寫多個div.container的網站，樣式便不再交替。 顯然，現在僅將nth-child(3n-2)樣式應用於所有 .container 。 PHP看起來像這樣：

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

這是怎么發生的？

Answer 1

如果n是第一個孩子，則（3n-2）將計算為（3-2 = 1）; 顯然，這些div中的每個最后一個現在都是其父級的第一個（因此也是唯一的）子級。 在看不到代碼其余部分的情況下，我無法確切告訴您要解決的問題（此循環是否在為每個循環創建父級的另一個循環內？），但是您可能必須將該循環上移，否則必須確保您所有的.container都被創建為兄弟姐妹，而不是一個孤獨的獨生子女。

對於以后調試nth-child問題的幫助，這很方便： http : //css-tricks.com/examples/nth-child-tester/