在 CSS 中使用多个类连续编号的嵌套有序列表

Question

我在 WordPress 中工作，并为我的 ol 和 li 设置了现有的默认 css 样式，我无法更改。

我需要使用类创建一个 3 级有序列表（样式化），但不知道如何继续从一个类到另一个类的编号。

我想出了一个解决办法。我创建了 6 个不同的类并将计数器重置设置为我想继续使用的数字，但是我知道这不是正确的做法，如果我要修改列表，编号不会自行调整。此外，列表样式位置不起作用，所以我不得不摆弄填充、边距和文本缩进以使其正确排列。

我创建了一个jsfiddle 来展示我的示例。我故意在第一级之外留下一个级别来显示它在做什么。我已经观看并阅读了几个教程以使我达到这一点，但现在我被卡住了。非常感谢您的帮助，谢谢！

我的 CSS

ol.myList {
counter-reset: list;
text-align:justify;
margin-left: 35px;   
padding-left: 30px;
text-indent: -3em;

}
ol.myList > li {
list-style: none;
margin-left: 0;
padding-left: 0;
margin-bottom: 20px; 
}

ol.myList > li:before {
counter-increment: list;
content:"(" counter(list, lower-alpha) ")"; padding-right: 1em;
margin-left: 1em;
}

ol.terms{
counter-reset: list;
text-align:justify;
margin-left: 35px;
padding-left: 0;
text-indent: -2em;
}

ol.terms > li {
list-style: none;
margin-left: 0;
padding-left: 0;
margin-bottom: 20px; 
}

ol.terms li:before {
content: counter(list) "."; padding-right: 1em;
counter-increment: list;
font-weight: bold;
}

ol.terms-cont{
counter-reset: list 8;
text-align:justify;
margin-left: 35px;
padding-left: 0;
text-indent: -2em;
}

ol.terms-cont > li {
list-style: none;
margin-left: 0;
padding-left: 0;
margin-bottom: 20px; 
}

ol.terms-cont li:before {
content: counter(list) "."; padding-right: 1em;
counter-increment: list; 
font-weight: bold;
}

ol.terms-roman {
counter-reset: list;
text-align:justify;
margin-left: 35px;   
padding-left: 65px;
text-indent: -3em;
}

ol.terms-roman > li {
list-style: none;
margin-left: 0;
padding-left: 0;
margin-bottom: 20px; 
}

ol.terms-roman > li:before {
counter-increment: list;
content:"(" counter(list, lower-roman) ")"; padding-right: 1em;
margin-left: 1em;
}

ol.myList-cont {
counter-reset: list 5;
text-align:justify;
margin-left: 35px;   
padding-left: 30px;
text-indent: -3em;
}

ol.myList-cont > li {
list-style: none;
margin-left: 0;
padding-left: 0;
margin-bottom: 20px; 
}

ol.myList-cont > li:before {
content:"(" counter(list, lower-alpha) ")"; padding-right: 1em;
counter-increment: list;
margin-left: 1em;
}

ol.terms-cont-1{
counter-reset: list continue;
text-align:justify;
margin-left: 35px;
padding-left: 0;
text-indent: -2.25em;
}

ol.terms-cont-1 > li {
list-style: none;
margin-left: 0;
padding-left: 0;
margin-bottom: 20px; 
}

ol.terms-cont-1 li:before {
content: counter(list) "."; padding-right: 1em;
counter-increment: list; 
font-weight: bold;
}

Answer 1

当然，我一在这里发帖就知道了。我正在关闭嵌套列表之间的<ol> 标签。固定的 HTML 在这个小提琴中：jshell.net/f9ruwzr5