我需要在我们的网站上写一些法律文本（条款和条件），法律专家已经做到这一点，因此有2个级别的增量。这不是一个大问题，我发现一些CSS可以很好地完成技巧。
但是，问题在于第三级增量不是1.1.1而是a，所以是另一种类型。而且我找不到使用CSS实现此目标的方法。
一个额外的麻烦是，在另一段中，他们在第三层使用了另一种类型：i，ii，iii。
我使用的代码如下。关于如何实现这一目标的任何想法？
<!DOCTYPE html>
<html>
<head>
<style>
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol > li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}
li ol > li {
margin: 0;
}
li ol > li:before {
content: counters(item, ".") " ";
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>this needs to be a</li>
<li>this needs to be b</li>
<li>this needs to be c</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
</body>
</html>
[好，我想出来了，这要归功于有关Mr Lister中类的指针。
技巧是双重的：
下面的完整代码。
<!DOCTYPE html>
<html>
<head>
<style>
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol > li:before {
content: counters(item, ".") ".";
display: table-cell;
padding-right: 0.6em;
}
li ol > li {
margin: 0;
}
li ol > li {
margin: 0;
}
li ol > li:before {
content: counters(item, ".") " ";
}
li ol li ol.alpha> li:before {
content: counter(item, lower-alpha)".";
}
li ol li ol.roman> li:before {
content: counter(item, lower-roman)".";
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item
<ol>
<li>item
<ol class="alpha">
<li>this needs to be a</li>
<li>this needs to be b</li>
<li>this needs to be c</li>
</ol>
</li>
<li>item</li>
<li>item
<ol class = "roman">
<li>this needs to be i</li>
<li>this needs to be ii</li>
<li>this needs to be iii</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
</body>
</html>
感谢您使我朝正确的方向！