Le HTML et les listes sont un nouveau niveau pour moi, j'essaie de créer une liste imbriquée en HTML avec des numéros associés et en utilisant des types alphanumériques au troisième niveau.
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>
Ce qui précède est mon code. Les résultats sont les suivants :
01.
01.01
01.02
01.03
02.
03.
04.
04.01
04.02
04.02.01
04.02.02
04.02.03
Mais ce que je veux c'est :
01.
01.01
01.02
01.03
02.
03.
04.
04.01
04.02
a. ←
b. ←
c. ←
04.03
Est-ce que quelqu'un sait comment résoudre ce problème ?
J'ai essayé des solutions numériques et effectué des recherches sur le Web. C'est ainsi que je suis arrivé à la solution ci-dessus. Mais je ne trouve pas de solution de style pour le type minuscule du troisième niveau.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Le moyen le plus simple consiste à modifier les éléments de votre liste de troisième niveau en éléments de liste, à masquer le contenu et à utiliser un style de liste avec des lettres minuscules :
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>Veuillez vérifier le code de fonctionnement ci-dessous :
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>