有什么方法可以根据 nth-child 变量增加 CSS 值吗？

Question

这可能是一个远景，但是，它是：

我有这个：

<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;
}

从第二个 child 开始，在 offset = 30px 处添加 35px 到每个 child。

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

Answer 1

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

有什么方法可以根据 nth-child 变量增加 CSS 值吗？

Is there any way to increment a CSS value depending on nth-child variable?

html

css

styling