如何在 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中文網其他相關文章！