如何在 HTML 中创建具有一致编号的嵌套有序列表？

带编号的 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中文网其他相关文章！