如何在 HTML 中對嵌套有序列表進行編號？

Numbering Nested Ordered Lists in HTML

To number nested ordered lists in HTML, a combination of CSS and JavaScript can be employed. This approach works consistently in modern browsers, including those that do not support advanced CSS properties.

CSS Approach:

1. Set the list-style-type of the main ordered list to none using CSS:

ol {
  list-style-type: none;
}

2. Use the counter-reset and counter-increment CSS properties to generate the numbers. For instance, the first level of nesting should increment a counter named "level1":

ol:before {
  content: counter(level1) ". ";
  counter-increment: level1;
}

3. For nested ordered lists, reset the counter to start a new sequence:

ol li ol {
  list-style-type: none;
  counter-reset: level2;
}

4. Generate the numbers for the nested list using the previously incremented counter:

ol li ol li:before {
  content: counter(level1) "." counter(level2) " ";
  counter-increment: level2;
}

jQuery Approach (IE6/7 Support):

1. Wrap nested list elements with a to apply styling:

$('ol ol').each(function(i, ol) {
  ol = $(ol);
  ol.children('li').each(function(i, li) {
    li = $(li);
    li.prepend('<span>' + level2 + '</span>');
  });
});

2. Style the elements to provide the desired numbering format:

ol li span {
  margin: 0 5px 0 -25px;
}

By combining these CSS and JavaScript techniques, you can effectively number nested ordered lists in HTML, ensuring consistent formatting across major browsers.

以上是如何在 HTML 中對嵌套有序列表進行編號？的詳細內容。更多資訊請關注PHP中文網其他相關文章！