CSS 应用第 n 个类型答案

【问题标题】：CSS apply n-th of typeCSS 应用第 n 个类型
【发布时间】：2017-08-02 20:48:05
【问题描述】：

我有多个span 元素，并希望在以下span 位置（10、19、28、37）将文本显示为红色。

我已经尝试了以下；

span {
    &:nth-of-type(9n+1) {
        color: red;
    }
}

唯一的事情是第一个跨度也应用了我不想要的 CSS。它应该从位置10 开始。我该如何解决这个问题？

【问题讨论】：

这是 SASS 吗？如果没有，请道歉；我标记了它，但后来意识到我不认识9n+1 正在尝试做什么......无论如何，我猜观察到的行为是正确的，你可以尝试10 + 9n。
是的，它是 SAAS...但是您可以将其视为普通 CSS..nth-of-type
9n+10 代替 9n+1 怎么样？
简单地说，据记载n 是一个从 0 开始的计数器，因此如果您有一个恒定的偏移量，则需要在表达式中包含该偏移量。

标签： css sass css-selectors

【解决方案1】：

按照您的建议 - 从 10 的偏移量开始。

span {
  &:nth-of-type(9n+10) {
      color: red;
  }
}

【讨论】：

【解决方案2】：

正如 Dave 在他的回答中所建议的，您可以使用 10 的偏移量，或者您可以设置另一个条件来排除第一个孩子

SCSS：

span {
      &:nth-of-type(9n+1):not(:first-child) {
          color: red;
      }
}

带有 CSS 的片段

span:nth-of-type(9n+1):not(:first-child) {
      color: red;
  }

<span>Span</span>
<span>Span</span>
<span>Span</span>
<span>Span</span>
<span>Span</span>
<span>Span</span>
<span>Span</span>
<span>Span</span>
<span>Span</span>
<span>Span</span>
<span>Span</span>
<span>Span</span>
<span>Span</span>
<span>Span</span>
<span>Span</span>
<span>Span</span>
<span>Span</span>
<span>Span</span>
<span>Span</span>
<span>Span</span>
<span>Span</span>

【讨论】：