How to Achieve Continuous Numbering in Nested Ordered Lists in HTML?

Numbering Nested Ordered Lists in HTML

When creating nested ordered lists in HTML, it's common for the nested elements to restart numbering from 1. To achieve continuous numbering, follow these steps:

CSS Approach (for modern browsers)

1. In the section of your HTML, add the following style:

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 (for IE6/7)

1. Include the jQuery library in the section:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

2. Add the following script to the end of the section:

$(document).ready(function() {
    if ($('ol:first').css('list-style-type') != 'none') { 
        $('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>');
            });
        });
    }
});

The above is the detailed content of How to Achieve Continuous Numbering in Nested Ordered Lists in HTML?. For more information, please follow other related articles on the PHP Chinese website!