css - 从特定子项之后开始的第 n 个子项模式

Question

如何实现如下所示的第 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;
}

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>