有没有办法根据 nth-child 变量增加 CSS 值？答案

【问题标题】：Is there any way to increment a CSS value depending on nth-child variable?有没有办法根据 nth-child 变量增加 CSS 值？
【发布时间】：2015-06-18 22:52:39
【问题描述】：

这可能是一个很长的镜头，但是，它是这样的：

我有这个：

<style>
    .select-option.hidden:nth-child(2) {
        top: 65px;
    }
    .select-option.hidden:nth-child(3) {
        top: 100px;
    }
    .select-option.hidden:nth-child(4) {
        top: 135px;
    }
    .select-option.hidden:nth-child(5) {
        top: 170px;
    }
    .select-option.hidden:nth-child(6) {
        top: 205px;
    }
</style>

我想要这样的东西：

.select-option.hidden:nth-child(n+2) {
    top: (30+((n-1)*35))px;
}

从第二个孩子和offset = 30px 开始，然后将35px 添加到每个孩子。

我不想使用 SASS 或其他令人毛骨悚然的东西。

【问题讨论】：

“我不想使用 SASS 或其他令人毛骨悚然的东西。”为什么 SASS 令人毛骨悚然？这正是它的用途。
只是... 没有，还没有。直到CSS variables 出现。
你可以试试LESS...
@JoshBeam 是的，我想。假设我尽可能地应用了 KISS 原则。 SASS 没有问题，如果你真的需要它，但我不会将它拖到我的解决方案 atm 中以仅解决这个问题。
是的，我完全理解您来自哪里，但不幸的是，要完全按照您的意愿去做，您无法使用 CSS 来完成。我建议的第一步是确保您在上面提出的解决方案确实是问题的正确解决方案（在工程中，他们会说，“不要尝试解决解决方案，尝试解决问题"。

标签： html css styling

【解决方案1】：

鉴于您提供的限制（没有 SASS 或其他令人毛骨悚然的东西），简单的答案是否定的，CSS 不可能。

【讨论】：

我想你是对的，谢谢你的回答。将尽可能标记为正确。如果我以后看到 SASS 的进一步用途，我可能会使用它。
@Marcus，好的，没问题。另一种选择是使用 JavaScript，但这可能最终需要您设置内联样式，这可能会有点复杂。这就是为什么在这种情况下通常 SASS 会成为首选，因为 1）它是动态的，2）它将所有样式保存在样式表中。