使用CSS编组序列:nth-​​child

Question

ul,li {
  display: block;
  margin:0;
  padding:0;
  list-style:none;
}
li {
  background: black;
  color: white;
  padding: 10px;
}
li:nth-child(2n+2) {
  background: red;
}
li:nth-child(3n+3) {
  background: green;
}
li:nth-child(4n+4) {
  background: blue;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
  <li>eleven</li>
  <li>twelve</li>
</ul>

我需要什么:

1. 黑色
2. 红色
3. 绿色
4. 蓝色
5. 黑色
6. 红色
7. 绿色
8. 蓝色
9. ...

......我怎么做到这一点:nth-child？

Answer 1

给出nth-child语法

:nth-child( <an-plus-b>  )

你需要迭代使用 4n+b

所以,

背景red它将是4n+2如此,4x0+2,4x1+2,4x2+2等,它给你元件2,6,10

背景 green它将是4n+3如此,4x0+3,4x1+3,4x2+3等,它给你元件3,7,11

和背景'blue,这将是4n+4如此,4x0+4,4x1+4,4x2+4等,它给你元件4,8,12

black鉴于您的财产,其余的元素1,5,9将默认着色li

ul,li {
  display: block;
  margin:0;
  padding:0;
  list-style:none;
}
li {
  background: black;
  color: white;
  padding: 10px;
}
li:nth-child(4n+2) {
  background: red;
}
li:nth-child(4n+3) {
  background: green;
}
li:nth-child(4n+4) {
  background: blue;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
  <li>eleven</li>
  <li>twelve</li>
</ul>