在特定孩子之后开始的第 n 个孩子模式答案

【问题标题】：nth-child pattern starting after a particular child在特定孩子之后开始的第 n 个孩子模式
【发布时间】：2017-01-09 05:02:44
【问题描述】：

你怎么能做一个像下面这样的第n个孩子模式：

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

【问题讨论】：

标签： css css-selectors styles

【解决方案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>

【讨论】：

【解决方案2】：

Pugazh 的答案是更好的答案，但只是为了解释为什么您最初的尝试没有奏效（我是全新的，没有足够的代表来评论）

在 CSS 选择器中，n 从 0 开始，因此 nth-child(n+1) 仍在选择第一个 (0+1)th 元素，因此 nth-child(n+2) 可以使用您的方法

【讨论】：