Css 多个第n个子语句

我试图得到一组特定的第n个子序列

我想为前10个事件应用某种样式，但在前10个事件之后，每15个事件我想应用另一种样式

我尝试了第2个孩子的陈述，但我还没有弄明白

&:nth-child(10n) {color:red;page-break-after:always;}
&:nth-child(10n+15) {color:blue;page-break-after:always;}

我对代码进行了一些更新，使其更加清晰，并添加了一张图片。

css

---

如果我没弄错的话，你希望10号之后的每15个元素都是蓝色的吗？那么第一个蓝色元素是25号？然后是第40、55等

问题是，

10n+15

不能做到这一点

10 * 1 + 15 = 25 // right
10 * 2 + 15 = 35 // wrong
10 * 3 + 15 = 45 // wrong

听起来你想要

15n+10

：

15 * 1 + 10 = 25 // right
15 * 2 + 10 = 40 // right
15 * 3 + 10 = 55 // right

因此，实际的选择器是：

div:nth-child(15n + 10) {
    color: blue;
}

不幸的是，这也将选择第10个元素。我假设你想要

蓝色

覆盖

红色

，只要适用，除了第10个元素不匹配。因此，您需要添加另一个选择器来重置第10个元素

div:nth-child(10) {
    color: red;
}

下面是一个JSFIDLE演示：

编辑

要求已更改，但我将保留原始信息以供参考

要选择前10个选项中的所有选项，可以使用

-n+10

。然而，选择下一个15是有点棘手。您需要使用从11到25的范围，这是通过组合2个

：n-child（）

选择器完成的：

:nth-child(n+11):nth-child(-n+25) { ... }

接下来的15个是

:nth-child(n+26):nth-child(-n+40) { ... }

你明白了

jsFiddle：

div{
保证金：2倍；
宽度：10px；
高度：10px；
背景：黑色；
浮动：左；
}
分区：第n个子级（-n+10）{
背景：红色；
}
分区：第n个子（n+11）：第n个子（-n+25）{
背景：蓝色；
}
分区：第n个子（n+26）：第n个子（-n+40）{
背景：绿色；
}

---

尝试并研究以下示例

li{
宽度：40px；
高度：40px；
显示：内联块；
边框：实心1px#333；
边界半径：50%；
保证金：5px；
}
li:n类型的第n个（-n+10）{
背景色：红色；
}
li:n个类型（n+15）{
背景颜色：蓝色；
}

与其一次只做一个，不如检查我的编辑更新。谢谢这就是你想要它看起来的样子吗？是的，大多数情况下都是分页符，如果它们也是垂直分页符就可以了

:nth-child(n+26):nth-child(-n+40) { ... }