根据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}

相关文章

前言 最近项目做完,用户需要兼容IE,于是开展了兼容性的调整工作。边调整边想感叹IE真是个沙雕。。特将...
前言 有些属性不是很常用,但是工作中遇到了,记录一下,方便学习。 1、text-indent text-indent 属性规...
前言 政府网站会遇到公祭日的时候,网站整体颜色变灰的情况。今天正好调了一下。在此把解决方案分享给大...
需求 项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息。 实现过程 书写css...
html代码 css代码 效果图
在一些界面上 , 如果每个icon都去找图片还是相当麻烦的 , 直接使用css画出icon就方便的多了 , 下面两个...