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

Question

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

换句话说，拥有这样的 HTML：

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

第一个块带有 a margin-left: 0em，第二个带有 a ，1em依此类推。

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

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

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

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

score 10 · Accepted Answer

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

“在 CSS 2.1 中，计数器的值只能从 'content' 属性中引用。” 来源

score 4 · Accepted Answer

小套装

如果您正在处理section彼此相邻的一小组元素（如您的示例所示），那么使用相邻的兄弟选择器（或者nth-of-type如果只需要 CSS3 支持）将获得您想要的东西，而无需计算。但是，可能远远超过五个元素，并且 css 可能会变得过于繁琐，因此如果您正在查看数百个元素，这是不切实际的。

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

score 3 · Accepted Answer

对于单行（或其他相同高度）的项目，您可以使用以下技巧：

section::before {
  content: '';
  float: left;
  height: 1.5em; /* a bit more than line height */
  width: 1em;
}

<section>A</section>
<section>B</section>
<section>C</section>
<section>D</section>
<section>E</section>