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

前端之家收集整理的这篇文章主要介绍了根据CSS中的计数器值设置边距(缩进)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想知道是否可以使用 CSS3根据计数器的值设置元素边距左.

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

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

有一个左边边缘的第一个块:0em,第二个与1em等等.

到目前为止,我已经尝试了以下几点:

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

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

使用CSS3可以这样做吗?我对涉及ECMAScript的解决方案感兴趣.

解决方法

对于一个小集

如果您正在处理一组彼此相邻的部分元素(如示例所示),则使用相邻的兄弟选择器(如果仅需要CSS3支持,则使用第n个类型)将为get you what you want without counting.但是,可能更多比大约五个元素,css可能会太麻烦,所以如果你正在看这个数百个元素,这是不实际的.

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

猜你在找的CSS相关文章