css - 每第 N 个元素重复 CSS 样式

Question

我正在格式化我的 Atom 缩进指南线的颜色。

Atom 样式在 CSS 中，但我不知道如何重复该模式。

这是现在的样子：

这是我的代码：

.editor {

  .indent-guide {

      // first level
      color: rgb(255, 140, 0);

      // second level
      &:nth-child(2) {
          color: rgb(138,43,226);
      }

      // third level
      &:nth-child(3) {
          color: rgb(46,139,87);
      }

  }

}

什么不见​​了？

标签： cssatom-editor

Answer 1

缺少重复：您只针对第 2^和第 3 个^孩子，作为适用于所有.indent-guide元素的第一条规则的例外。

3n + 1改为使用 3n + 2

.editor {

  .indent-guide {

      // first level
      color: rgb(255, 140, 0);

      // second level
      &:nth-child(3n + 1) {
          color: rgb(138,43,226);
      }

      // third level
      &:nth-child(3n + 2) {
          color: rgb(46,139,87);
      }

  }

}