How to Achieve Continuous Numbering in Nested Ordered Lists in HTML?-CSS Tutorial-php.cn

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

Linda Hamilton

Release： 2024-11-29 22:13:12

Original

205 people have browsed it

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)

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

Copy after login

jQuery Approach (for IE6/7)

Include the jQuery library in the section:

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

Copy after login

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

Copy after login

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!