Sagen Sie, ich habe ein HTML- oder XML-Dokument wie folgt:
%Vor%Dies ist nur ein illustratives Beispiel; Im Allgemeinen kann eine beliebige Anzahl von untergeordneten Abschnitten innerhalb eines Abschnitts vorhanden sein, und Abschnitte können in beliebiger Tiefe verschachtelt sein.
Ist es möglich, CSS (Zähler und generierten Inhalt) zu verwenden, um die gewünschte Abschnittsnummer am Anfang jedes Abschnitts-Titels zu erzeugen?
Die einzigen Beispiele, die ich gesehen habe, wo solche Dinge funktionieren, sind verschachtelte Listen , aber dort können Sie 'counter-reset' an OL und 'counter-increment' an LI anhängen. Hier scheint es so, als ob Sie 'section' benötigen, um sowohl für die untergeordneten Abschnitte als auch für die increment-Anweisung in der übergeordneten Section zurückzusetzen, und das Anhängen dieser beiden Elemente an einen Elementnamen funktioniert nicht.
Sie sollten CSS-Zähler in diesem Fall verwenden.
Update-Lösung (besser) . Schließlich wäre ein etwas flexiblerer Ansatz das Zurücksetzen des Zählers auf dem body anfänglich statt auf section:first-child und auch auf jedem nächsten nächsten Geschwister des h1 .
Aktualisierte Lösung . Es stellte sich heraus, dass meine ursprüngliche Lösung nicht sehr gut ist, wie in Kommentaren gezeigt. Hier ist überarbeitete korrekte Version, die mit einer beliebigen Anzahl von geschachtelten oder Geschwisterabschnitten ordnungsgemäß funktionieren sollte.
Original (Buggy) . In diesem Fall gibt es einen heiklen Teil: Der Zähler sollte für jede weitere section erhöht werden. Dies kann mit section + section selector erreicht werden:
Tags und Links html css css-counter