HTML und Listen sind für mich eine neue Ebene. Ich versuche, eine verschachtelte Liste in HTML mit zugehörigen Zahlen zu erstellen und alphanumerische Typen in der dritten Ebene zu verwenden.
body {
padding-left: 100px;
}
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, ".",decimal-leading-zero) ". ";
display: table-cell;
padding-right: 0.6em;
}
li ol>li {
margin: 0;
}
li ol>li:before {
content: counters(item, ".",decimal-leading-zero) " ";
}
<ol>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li></li>
<li></li>
<li>
<ol>
<li></li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ol>
</li>
</ol>
Das Obige ist mein Code. Die Ergebnisse sind wie folgt:
01.
01.01
01.02
01.03
02.
03.
04.
04.01
04.02
04.02.01
04.02.02
04.02.03
Aber was ich will ist:
01.
01.01
01.02
01.03
02.
03.
04.
04.01
04.02
a. ←
b. ←
c. ←
04.03
Weiß jemand, wie man dieses Problem löst?
Ich habe digitale Lösungen ausprobiert und im Internet gesucht. So bin ich zu der oben genannten Lösung gekommen. Aber ich kann keine Styling-Lösung für die Kleinschreibung der dritten Ebene finden.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
最简单的方法是将您的第三级列表项更改回列表项，隐藏内容并使用小写字母的列表样式：
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, ".", decimal-leading-zero) ". "; display: table-cell; padding-right: 0.6em; } li ol>li { margin: 0; } li ol>li:before { content: counters(item, ".", decimal-leading-zero) " "; } /* 下面的样式添加，其他内容不变 */ ol ol ol { list-style-type: lower-alpha; } ol ol ol li { display:list-item; margin-left: 1em; } ol ol ol li:before { content: none; }<ol> <li> <ol> <li></li> <li></li> <li></li> </ol> </li> <li></li> <li></li> <li> <ol> <li></li> <li> <ol> <li></li> <li></li> <li></li> </ol> </li> </ol> </li> </ol>请检查下面的工作代码：
ol { list-style-type: none; counter-reset: item; margin: 0; padding: 0; } ol>li { display: block; counter-increment: item; margin-bottom: 0.6em; padding-left: 15px; } ol>li:before { content: counters(item, ".",decimal-leading-zero) ". "; display: table-cell; padding-right: 0.6em; } li ol>li { margin: 0; } li ol>li:before { content: counters(item, ".",decimal-leading-zero) " "; } ol>li>ol>li>ol { counter-reset: listStyle; } ol>li>ol>li>ol li{ margin-left: 1em; counter-increment: listStyle; } ol>li>ol>li>ol li::before { margin-right: 1em; content: counter(listStyle, lower-alpha); }<html> <head> </head> <body> </body> <ol> <li> <ol> <li></li> <li></li> <li></li> </ol> </li> <li></li> <li></li> <li> <ol> <li></li> <li> <ol> <li></li> <li></li> <li></li> </ol> </li> </ol> </li> </ol> </body> </html>