Question

如何进行如下的n-child模式：

div:nth-child(3n+1){
   background: #FF7100;
}
div:nth-child(3n+2){
   background: #FFB173;
}
div:nth-child(3n+3){
   background: #A64A00;
}

但是要跳过例如第一个孩子并且只在第一个孩子之后开始这个模式。我尝试将它链接到下面，但它似乎不起作用：

 div:nth-child(n+1):nth-child(3n+1) {
    background: #FF7100;
}

Answer 1

使用:not(:first-child)选择器跳过第一个孩子。

div:not(:first-child):nth-child(3n+1) {
  background: #FF7100;
}
div:nth-child(3n+2) {
  background: #FFB173;
}
div:nth-child(3n+3) {
  background: #A64A00;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

如果你想跳过每种风格的第一个元素，试试这个

div:nth-child(1) ~ div:nth-child(3n+1) {
  background: #FF7100;
}
div:nth-child(2) ~ div:nth-child(3n+2) {
  background: #FFB173;
}
div:nth-child(3) ~ div:nth-child(3n+3) {
  background: #A64A00;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

Answer 2

Pugazh的回答是更好的答案，但只是为了解释为什么你的初步尝试不起作用（我是全新的，而不是代表评论）

在CSS选择器中，n从0开始，因此nth-child(n+1)仍在选择第一个(0+1)th元素，因此nth-child(n+2)将使用您的方法工作< / p>

在特定孩子之后开始的n-child模式

2 个答案: