如何在 HTML 中对嵌套有序列表进行连续计数？

HTML 中嵌套有序列表的编号

您拥有一个嵌套有序列表，希望更改第二层嵌套元素的编号方式，使其从上一层继承编号并继续计数。目前，第二层元素从 1 重新开始计数，但您希望它们以小数形式编号，例如 2.1、2.2 和 2.3。

这个问题可以通过以下方法解决：

CSS 解决方案（所有现代浏览器）

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;
}

此 CSS 采用计数器机制，为每个嵌套级别维护编号。它在所有现代浏览器中都能正常工作。

兼容 IE6/7 的 jQuery 解决方案

对于 Internet Explorer 6/7，Pure CSS 解决方案不起作用。因此，需要一个回退机制：

<script>
  $(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 + '');
        });
      });
    }
  });
</script>

此 jQuery 代码将为 Internet Explorer 6/7 浏览器添加编号。它在元素之前插入一个 span，其中包含嵌套编号。

以上是如何在 HTML 中对嵌套有序列表进行连续计数？的详细内容。更多信息请关注PHP中文网其他相关文章！