我有嵌套列表,我无法更改其结构。第一个 li
元素不能包含在编号中,但是,它的子元素必须全部编号。这是 JsFiddle .
ol li ol {
counter-reset: section;
list-style-type: none;
}
ol li ol li::before {
counter-increment: section;
content: counters(section, ".") " ";
}
<ol id="root">
<li>List item two with subitems (this should not be numbered):
<ol id="toc0">
<li>Subitem 1 (This should be numbered 1)</li>
<li>Subitem 2 (This should be 2)</li>
<ol>
<li> subitem (this should be 2.1)</li>
<li> subitem (this should be 2.2)</li>
<ol>
<li> subitem (This should be 2.2.1)</li>
<li> subitem (This should be 2.2.2)</li>
</ol>
</ol>
<li>Subitem 3 (This should be 3)</li>
<li>Subitem 4 (This should be 4)</li>
</ol>
</li>
</ol>
最佳答案
您的标记无效,ol
不能是另一个 ol
的直接子代。您必须更新 HTML 才能修复它,您现有的 CSS 只需稍作修改即可正常工作。
ol {
list-style: none;
}
ol li ol {
counter-reset: section;
}
ol li ol li::before {
counter-increment: section;
content: counters(section, ".") " ";
}
<ol id="root">
<li>List item two with subitems (this should not be numbered):
<ol id="toc0">
<li>Subitem 1 (This should be numbered 1)</li>
<li>
Subitem 2 (This should be 2)
<ol>
<li>subitem (this should be 2.1)</li>
<li>
subitem (this should be 2.2)
<ol>
<li> subitem (This should be 2.2.1)</li>
<li> subitem (This should be 2.2.2)</li>
</ol>
</li>
</ol>
</li>
<li>Subitem 3 (This should be 3)</li>
<li>Subitem 4 (This should be 4)</li>
</ol>
</li>
</ol>
关于html - 自定义嵌套有序列表编号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52449583/