带编号的 HTML 嵌套有序列表
在 HTML 中创建嵌套有序列表时，您可能会遇到内部列表开始编号的问题又从1开始。这可能会破坏列表的正常流动。为了解决这个问题，可以采用以下 CSS 和 jQuery 技术：
CSS 方法
对于支持 CSS 样式的浏览器，您可以使用 counter-reset 属性来重置列表每个级别的编号。 counter-increment 属性增加每个列表项的计数器。
html body ol {
list-style-type: none;
counter-reset: level1;
}
ol li:before {
content: counter(level1) ". ";
counter-increment: level1;
}
ol li ol {
list-style-type: none;
counter-reset: level2;
}
ol li ol li:before {
content: counter(level1) "." counter(level2) " ";
counter-increment: level2;
}jQuery Approach
对于不支持 counter- 的旧版浏览器（如 IE6/7）重置属性后，您可以使用 jQuery 手动插入编号。此方法涉及在每个项目前面添加一个 。包含相应编号的元素。
$(document).ready(function() {
if ($('ol:first').css('list-style-type') != 'none') { /* For IE6/7 only. */
$('ol ol').each(function(i, ol) {
ol = $(ol);
var level1 = ol.closest('li').index() + 1;
ol.children('li').each(function(i, li) {
li = $(li);
var level2 = level1 + '.' + (li.index() + 1);
li.prepend('<span>' + level2 + '</span>');
});
});
}
});通过实施这两种方法中的任何一种，您都可以实现具有一致编号的嵌套有序列表，从而提供更有组织性和结构化的内容呈现。
以上是如何在 HTML 中创建具有一致编号的嵌套有序列表？的详细内容。更多信息请关注PHP中文网其他相关文章！
