每第 N 个元素重复 CSS 样式

【问题标题】：Repeat CSS Style Every Nth Element每第 N 个元素重复 CSS 样式
【发布时间】：2020-02-04 11:11:20
【问题描述】：

我正在格式化我的 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);
      }

  }

}

缺少什么？

【问题讨论】：

标签： css atom-editor

【解决方案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);
      }

  }

}

【讨论】：