提问人：kirvis 提问时间：1/30/2020 最后编辑：kirvis 更新时间：1/30/2020 访问量：288
嵌套有序列表 HTML：第 3 个增量为不同类型的
Nested ordered list HTML: 3rd increment to be of a different type
问：
我需要在我们的网站上放一些法律文本（条款和条件），法律人员已经做到了，因此有 2 个级别的递增。这不是一个大问题，我发现了一些可以很好地解决问题的CSS。
但是，问题是第 3 级增量不是 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>
答：
3赞
kirvis
1/30/2020
#1
好吧，我想通了，多亏了李斯特先生关于课程的指针。
诀窍有两个：
- 将特定的选择器添加到 CSS 中，以仅选择列表的第 3 级
- 添加 2 个类，一个用于低 alpha，一个用于低罗马
完整代码如下。
<!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>
谢谢你把我放在正确的方向上！
评论
body > ol ol ol li::beforebody > ol ~ ol ol ol li::before