假设您有一个CSS 2.1计数器
ol {
counter-reset: section;
list-style-type: none;
}
li:before {
counter-increment: section;
content: counters(section, ".") " ";
}
<ol>
<li>itemA</li> <!-- 1 -->
<li>itemB <!-- 2 -->
<ol>
<li>itemC</li> <!-- 2.1 -->
<li id="foo">itemD</li> <!-- 2.2 -->
Run Code Online (Sandbox Code Playgroud)
(参见https://developer.mozilla.org/en/CSS_Counters "嵌套计数器")
有没有办法在JavaScript中读取/获取:before.content
(在这种情况下为"2.2")<li id="foo">
?
编辑:在我的情况下,只有Mozilla的解决方案就足够了.但似乎没有办法访问这些信息.至少我没有在https://developer.mozilla.org/en/CSS_Counters ff 找到任何内容.
我在使用css"content"属性创建一个有序列表时遇到了一些问题,该列表已被设置为使用小数显示更深层嵌套的项目.我正在尝试做的似乎是一项显而易见的任务,但我还没有成功,而且我遇到了一些跨浏览器的问题,但我似乎无法在互联网上找到太多的东西......我是什么在我在这个问题的底部附上的图像中,我试图做的很清楚.
ol {list-style:none; font:11px arial; margin:0px 0px 0px 10px; padding:0;}
ol li:before {
content: counter(num) ". ";
counter-increment: num;
counter-reset: sub_num;
}
ol ol li:before {
content: counter(num) "." counter(sub_num) " ";
counter-increment: sub_num;
counter-reset: sub_sub_num;
}
ol ol ol li:before {
content: counter(num) "." counter(sub_num) "." counter(sub_sub_num) " ";
counter-increment: sub_sub_num;
counter-reset:none;
}
Run Code Online (Sandbox Code Playgroud)
<ol>
<li>Level 1 - should be '1.'</li>
<li>Level 1 - should be '2.'
<ol>
<li>Level 2 - Should be '2.1'</li>
<li>Level 2 - Should …
Run Code Online (Sandbox Code Playgroud)