Css ：n-child（）每三个项目设置一个目标

我试图针对页面上的每一个第一、第二和第三个

。定价示例

，以便为每个页面应用不同的背景颜色。但是，使用下面的代码，当3个

.pricing example

元素位于一个页面上时，

nth child（1n）

以项目1和3为目标，而

nth child（3n）

以项目2为目标，我不理解。我试图实现的是在每三个项目上启用不同的背景颜色，如下所示：

• 项目1=背景1
• 项目2=背景2
• 项目3=背景3
• 项目4=背景1
• 项目5=背景2
• 项目6=背景3
• 项目7=背景1
• 等等

HTML

<div class="blocks">
    <figure class="custom-block image"></figure>
    <figure class="custom-block text"></figure>
    <figure class="custom-block pricing-example"></figure>
    <figure class="custom-block pricing-example"></figure>
    <figure class="custom-block pricing-example"></figure>
</div>

---

伪类公式是（An+B）。Per:

表示其在一系列同级中的数字位置的元素 对于的每个正整数或零值，匹配模式A+B N第一个元素的索引是1。值A和B必须同时为 必须是整数

所以您要使用

3n+1

、

3n+2

和

3n+3

：

p:n个子（3n+1）{
背景：红色；
}
第n个孩子（3n+2）{
背景：蓝色；
}
第n个孩子（3n+3）{
背景：绿色；
}

1

二,

三,

一,

二,

三,

一,

二,

3

您需要执行以下操作：

li:n子代（3n+1）{
背景色：红色；
}
李：第n个孩子（3n+2）{
背景颜色：蓝色；
}
李：第n个孩子（3n+3）{
背景颜色：绿色；
}

项目一
项目二
项目三
项目四
项目五
项目六
项目七
项目八
项目九

从技术上讲，他的代码也是正确的：。我想问题在于他的HTMLstructure@TemaniAfif虽然他的代码应该可以工作，但这并不是解决元素的正确方法，因为他一直在覆盖以前的元素。但是你可能是对的，OP的HTML有问题。嗨，他们都用HTML更新了问题。它位于其他项目的页面上，但据我所知，代码仍应针对每三个项目？@dungey_140它位于其他项目的页面上，显示其他项目的html。我已更新问题以显示更多html。我想针对figure.pricing-example（每一个问题，第二个，第三个问题）。他所做的也是正确的：我怀疑HTML代码存在我们不知道的问题have@TemaniAfif是的，你发现了一些东西-肯定缺少一些信息。你的问题是如何在CSS或Sass中做到这一点？如果是后者，请具体说明。如果是前者，请提供CSS而不是您拥有的Sass代码。这仍然不够。您正在SASS代码中使用

&

，但我们看不到上面的选择器知道

&

指的是什么。试着考虑一个完整的代码更新问题

.pricing-example {

    // Alternate background colours of images when multiple blocks
    &:nth-child(1n) {
        background-color: red;
    }
    &:nth-child(2n) {
        background-color: blue;
    }
    &:nth-child(3n) {
        background-color: green;
    }
}