根据CSS中的计数器值设置边距（缩进）

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

左边距

换句话说，具有如下HTML：

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

但是，

calc（）

似乎不支持获取计数器值

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

对于一小部分 如果您处理的是一小组相邻的

部分

元素（如示例所示），则使用相邻的同级选择器（或

nth类型

，如果只需要CSS3支持），将执行以下操作。然而，可能比五个元素多得多，css可能会变得太麻烦，因此，如果您要查看数百个元素，这是不实际的

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

---

它只在

content

属性中起作用，而不像您所认为的变量。如果您在DevTools或类似工具中查看它，则它不是整数。您仍然可以在那里看到

计数器（myCounter）

“在CSS 2.1中，计数器的值只能从“内容”属性中引用。”

对于单行（或其他相同高度）项目，可以使用以下方法：

section:：before{
内容：''；
浮动：左；
高度：1.5em；/*略高于线高度*/
宽度：1米；
}

A
B
C
D
E

我会有根据地猜测，并说这是不可能的。另外，嵌套元素难道不可能吗？@Madara Uchiha:正确，这不可能使用

calc（）

或计数器。必须手动完成或使用其他解决方法。@MadaraUchiha：一切都有可能，但嵌套节在语义上不正确。@MichałGórny-，这取决于节的内容在特定应用程序中是否正确。如果你的部分是彼此的子部分（你的缩进欲望似乎表明了这一点），那么这肯定是一条路。@ScottS:我指的是这个特定的上下文。它们不是分段的；这只是一种预期的视觉效果。好吧，我现在已经使用了

：nth类型的

，但我想知道是否有更通用的解决方案。

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