css - 根据 CSS 中的计数器值设置边距(缩进)

Question

我想知道是否可以使用 CSS3 根据计数器的值设置元素 margin-left。

换句话说，有一个像这样的 HTML:

<section>A</section>
<section>B</section>
<section>C</section>

第一个 block 的 margin-left: 0em，第二个 block 的 1em 等等。

到目前为止，我已经尝试了以下方法:

section
{
    counter-increment: sect-indent;
    margin-left: calc(counter(sect-indent) * 1em);
}

但是 calc() 似乎不支持获取计数器值。

使用 CSS3 可以实现这样的事情吗？我对涉及 ECMAScript 的解决方案不感兴趣。

Answer 1

它只在 content 属性中起作用，不像您想象的那样是变量。如果你在 DevTools 之类的查看它，它不是一个整数。您仍会在其中看到 counter(myCounter)。

“在 CSS 2.1 中，计数器的值只能从‘content’属性中引用。” source