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

Question

我想知道是否可以margin-left使用CSS3基于计数器的值设置元素.

换句话说,拥有这样的HTML:

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

有第一块,有margin-left: 0em第二块,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'属性中引用." 资源

Answer 2

对于小套装

如果您正在处理一小组section彼此相邻的元素（如示例所示），那么使用相邻的同级选择器（或者nth-of-type如果只需要 CSS3 支持）将获得您想要的内容，而无需计数。然而，可能超过五个元素，CSS 可能会变得太麻烦，所以如果您要查看数百个元素，这是不切实际的。

section { margin-left: 0}
section + section {margin-left: 1em}
section + section + section {margin-left: 2em}