


Wie erreicht man eine fortlaufende Nummerierung in verschachtelten geordneten Listen in HTML?
Nov 29, 2024 pm 10:13 PMNummerierung verschachtelter geordneter Listen in HTML
Beim Erstellen verschachtelter geordneter Listen in HTML ist es üblich, dass die Nummerierung der verschachtelten Elemente bei 1 beginnt. Um eine fortlaufende Nummerierung zu erreichen, befolgen Sie die folgenden Schritte diese Schritte:
CSS-Ansatz (für moderne Browser)
- Im <head> Fügen Sie im Abschnitt Ihres HTML-Codes den folgenden Stil hinzu:
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-Ansatz (für IE6/7)
- Fügen Sie die jQuery-Bibliothek ein der <Kopf> Abschnitt:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
- Fügen Sie das folgende Skript am Ende des <body> hinzu. Abschnitt:
$(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>'); }); }); } });
Das obige ist der detaillierte Inhalt vonWie erreicht man eine fortlaufende Nummerierung in verschachtelten geordneten Listen in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heißer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen

Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework

Erstellen Sie einen Inline -Texteditor mit dem inhaltlichen Attribut

Machen Sie Ihren ersten Seltsamen -Sufle -Übergang

Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte)

Datei hochladen mit Multer in node.js und ausdrücken
