多个第 n 个子语句

Question

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

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

我尝试了 2 nth-child 个语句，但我还没有弄明白

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

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

Answer 1

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 2

如果我没理解错的话，您希望第 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

所以实际的 selector 会是：

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

不幸的是，这也将是 select 第 10 个元素。我假设您希望 blue 在适用的情况下覆盖 red，除了不应该匹配的第 10 个元素。因此您需要添加另一个 select 或重置第 10 个元素。

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

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

编辑

要求有变化，但我会留下原来的资料供参考。

到select所有的前10个都可以用-n+10。然而，对于 select 接下来的 15 个有点棘手。您需要使用从 11 到 25 的范围，这是通过组合 2 :nth-child() select 或：

来完成的

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

接下来的 15 个将是

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

你明白了。

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

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;
}

<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>

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>

多个第 n 个子语句

Multiple nth Child statements

css

css-selectors