用CSS，一个有序的列表能产生像1.1、1.2、1.3这样的结果吗(而不是1、2、3……)?到目前为止，使用list-style-type:decimal只生成了1,2,3，而不是1.1,1.2。1.3点。
当前回答
我在添加编号列表到Python Markdown的TOC扩展。
我是这样做的:
.toc ul { counter-reset: outItem; list-style: none }
.toc ul > li{ counter-reset: nestedItem }
.toc ul > li:before { content: counters(outItem, ".") ". "; counter-increment: outItem; margin-left: -2em; }
我不确定这是正确的方法，但对我来说很有效。
其他回答
在不久的将来，您可能能够使用::marker伪元素在一行代码中实现与其他解决方案相同的结果。
记得检查浏览器兼容性表，因为这仍然是一个实验技术。 在撰写本文时，只有Firefox和Firefox for Android(从版本68开始)支持此功能。
这是一个抽泣，如果尝试在一个温和的浏览器: 签名。‘:’的 李正左:0。 < ol > < li > li元素 < ol > <li>sub li element</li> <li>sub li element</li> <li>sub li element</li> < / ol > < / li > < li > li元素< / li > < li > li元素 < ol > <li>sub li element</li> <li>sub li element</li> <li>sub li element</li> < / ol > < / li > < / ol >
你可能也想看看smashingmagazine上关于这个话题的文章。
我在添加编号列表到Python Markdown的TOC扩展。
我是这样做的:
.toc ul { counter-reset: outItem; list-style: none }
.toc ul > li{ counter-reset: nestedItem }
.toc ul > li:before { content: counters(outItem, ".") ". "; counter-increment: outItem; margin-left: -2em; }
我不确定这是正确的方法，但对我来说很有效。
我有一些问题时，有两个列表和第二个是在DIV 第二个列表应该从1开始。不是2.1
<ol>
<li>lorem</li>
<li>lorem ipsum</li>
</ol>
<div>
<ol>
<li>lorem (should be 1.)</li>
<li>lorem ipsum ( should be 2.)</li>
</ol>
</div>
http://jsfiddle.net/3J4Bu/364/
编辑: 我用这个方法解决了问题 http://jsfiddle.net/hy5f6161/
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Sandro Alvares - KingRider">
</head>
<body>
<style type="text/css">
li.title {
font-size: 20px;
font-weight: lighter;
padding: 15px;
counter-increment: ordem;
}
.foo {
counter-reset: foo;
padding-left: 15px;
}
.foo li {
list-style-type: none;
}
.foo li:before {
counter-increment: foo;
content: counter(ordem) "." counter(foo) " ";
}
</style>
<ol>
<li class="title">TITLE ONE</li>
<ol class="foo">
<li>text 1 one</li>
<li>text 1 two</li>
<li>text 1 three</li>
<li>text 1 four</li>
</ol>
<li class="title">TITLE TWO</li>
<ol class="foo">
<li>text 2 one</li>
<li>text 2 two</li>
<li>text 2 three</li>
<li>text 2 four</li>
</ol>
<li class="title">TITLE THREE</li>
<ol class="foo">
<li>text 3 one</li>
<li>text 3 two</li>
<li>text 3 three</li>
<li>text 3 four</li>
</ol>
</ol>
</body>
</html>
结果: http://i.stack.imgur.com/78bN8.jpg
注意:使用CSS计数器在现代浏览器中创建嵌套编号。请看公认的答案。以下内容仅供参考。
如果浏览器支持内容和计数器，
. foo { counter-reset: foo; ｝ .foo li { list-style-type:没有; ｝ .foo li::before { counter-increment: foo; 内容:“1.”counter(foo)“”; ｝ < ol class = " foo " > <李> uno李< / > <李> dos李< / > <李>非常李< / > <李>四弦吉他李< / > < / ol >
