每第 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);
      }

  }

}

缺少什么？

Answer 1

repetition 缺失：您的目标是 2^nd 和 3^rd 仅限子级，作为适用于所有 .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);
      }

  }

}

每第 N 个元素重复 CSS 样式

Repeat CSS Style Every Nth Element

css

atom-editor