Question

我正在尝试使用CSS实现复杂类型的第n个子选择，我不确定它是否可行。如果是，可能有人知道如何实现它。（我发现this guide但它似乎没有我所需要的解决方案

所需的结果是如下所示的序列：

R B Y Y Y B R Y Y Y R B Y Y Y B R Y Y Y. 。

更清晰

到目前为止我的CSS是：

div {
  float: left;
  width: 50px;
  height: 50px;
  background: grey;
  border: 1px solid black; 
}

div:nth-child(odd) {
    background: red;
}

div:nth-child(even) {
    background: blue;
}

div:nth-child(3n) {
    background: yellow;
}

但这远远不够。

这可以实现吗？

Answer 1

尝试：

div:nth-child(odd) {
    background: red;
}
div:nth-child(even) {
    background: blue;
}
div:nth-child(5n+3), div:nth-child(5n+4), div:nth-child(5n) {
    background: yellow;
}

DEMO

Answer 2

这是另一种解决方案：

div {
  ...
  background: yellow;
}
div:nth-child(10n + 1), div:nth-child(10n + 7) {
  background: red;
}

div:nth-child(10n + 2), div:nth-child(10n + 6) {
  background: blue;
}

复杂的CSS第n个子选择器

2 个答案:

Demo.