Question

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

换句话说，拥有这样的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'属性中引用。” source

Answer 2

小集

如果您正在处理彼此相邻的一小组section元素（如示例所示），那么使用相邻的兄弟选择器（如果需要CSS3支持，则使用nth-of-type）将get you what you want without counting。然而，可能远远超过大约五个元素和css可能会变得太麻烦，所以如果你看这个数百个元素，这是不切实际的。

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

Answer 3

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

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>

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

3 个答案:

小集