多个第n个孩子陈述

Question

我正在尝试拥有一组第n个子序列。

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

我尝试了2个第n个孩子的陈述，但我还没想出来

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

我稍微更新了代码以使其更清晰，并添加了一张图片。

Answer 1

如果我理解你的话，你希望在第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个元素。我假设您希望blue在适用的情况下覆盖red，但第10个不应该匹配的元素除外。所以你需要添加另一个选择器来重置第10个元素。

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

这是一个jsFiddle演示：http://jsfiddle.net/mvdzc99b/

修改

要求已更改，但我会将原始信息留在此处以供参考。

要选择前10个所有，您可以使用-n+10。但是选择下一个15则有点棘手。您需要使用11到25之间的范围，这是通过组合2个:nth-child()选择器完成的：

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

接下来的15将是

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

你明白了。

jsFiddle：http://jsfiddle.net/mvdzc99b/3/

＆＃13;

＆＃13;

div {
    margin: 2px;
    width: 10px;
    height: 10px;
    background: black;
    float: left;
}

div:nth-child(-n+10) {
    background: red;
}

div:nth-child(n+11):nth-child(-n+25) {
    background: blue;
}

div:nth-child(n+26):nth-child(-n+40) {
    background: green;
}

＆＃13;

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

<强> Demo

CSS

div{
    width:10px;
    height:10px;
    margin:1px;
    display:inline-block
}
div{
    background:black;
}
div:nth-child(10n){
    background:red;
}
div:nth-child(10n + 115){
    background:green;
}
div:nth-child(10n + 110){
    background:black;
}

Answer 3

尝试并研究以下示例。

li {
    width: 40px;
    height: 40px;
    display: inline-block;
    border: solid 1px #333;
    border-radius: 50%;
    margin: 5px;
}


li:nth-of-type(-n+10) {
    background-color: red;

}

li:nth-of-type(n+15) {
    background-color: blue;

}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>

  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>

  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>

  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>

  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>

  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>

  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>

  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>

  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>

  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>

</ul>