具有不同计数器的CSS计数器显示在每个级别中，没有额外的类

Question

我正在尝试创建一个有序列表(条款和条件内容(，其词根为数值，第二个为小写字母，第三个为罗马字母。我在这里找到了一个SO指南，但它需要在第二层添加一个类。不幸的是，内容将由工作人员通过所见即所得编辑器添加，因此手动添加额外的类是不可能的(？(。

下面的代码输出一个标准计数器。结果是2.1将被a替换，2.1.1将被i替换。

示例列表*无法嵌入整个图像：(

欢迎提出任何建议。

.numbered_list{
counter-reset: list-number;
ol {
padding-left: 40px;
list-style-type:none;
counter-reset:count;
li{
color: red;
counter-increment:count;
&::marker{
content: counters(count, '.', decimal) ') ';
}
&:before{
}
}
}

}

Answer 1

在链接问题的anser之后，只需更改CSS选择器。

对于要针对的每个附加级别，将另一个ol添加到选择器列表中。在生产环境中，您可能会使用wysiwyg编辑器类来准备所有选择器。

/* first level */
ol {
counter-reset: l1;
list-style-type: none;
}
ol li:before {
counter-increment: l1;
content: counter(l1) " ";
}

/* second level */
ol ol {
counter-reset: l2;
}
ol ol li:before {
counter-increment: l2;
content: counter(l1) "." counter(l2) " ";
}

/* third level */
ol ol ol {
counter-reset: l3;
}
ol ol ol li:before {
counter-increment: l3;
content: counter(l1) "." counter(l2) "." counter(l3) " ";
}

<ol>
<li>
First Level
<ol>
<li>
Second Level
<ol>
<li>Third Level</li>
<li>Third Level</li>
</ol>
</li>
<li>Second Level</li>
</ol>
</li>
</ol>
<p>a paragraph, followed by another list</p>
<ol>
<li>
First Level
<ol>
<li>
Second Level
<ol>
<li>Third Level</li>
<li>Third Level</li>
</ol>
</li>
<li>Second Level</li>
</ol>
</li>
</ol>