CSS Counter - Problem mit Container

[Regina Schlauklug]

      body {
         counter-reset: ebene1;
      }
      h1 {
         counter-reset: ebene2;
         counter-increment: ebene1;
      }
      h2 {
         counter-reset: ebene3;
         counter-increment: ebene2;
      }
      h3 {
         counter-reset: ebene4;
         counter-increment: ebene3;
      }

   <h1>1</h1>
   <h2>1.1</h2>
   <h2>1.2</h2>
   <div>
      <h2>1.3</h2>
      <h3>1.3.1</h3>
   </div>
   <h3>1.3.2</h3>

wird

1
1.1
1.2
1.3
1.3.1
1.3.1

ausgegeben. Von der ersten h3 zur zweiten h3 zählt der Counter also nicht weiter.

Gibt es CSS-Anweisungen um den Counter zu veranlassen sich nur an den Überschriften zu orientieren?

Nein. Das Problem liegt auch meiner Meinung nach in der Struktur deines Dokumentes – aber keine Panik.

Jedes Element übernimmt die Zähler seines Vorgängers derselben Ebene; hat es keinen Vorgänger, übernimmt es jene des Elternelements.
h2-1.2 hat einen Zähler ebene3 erzeugt. Das div als Nachfolger übernimmt diesen Zähler. h2-1.3 nun übernimmt seinerseits den ebene3-Zähler von seinem Elternelement div (und indirekt von h2-1.2), soll aber selber einen ebene3-Zähler erzeugen. h2-1.3 macht dann das, was als "verschachtelte Zähler" vorgesehen ist: Es existiert bereits ein Zähler des Namens, also wird ein Unterzähler gleichen Namens erzeugt.

Counters are "self-nesting"; creating a new counter in an element which already has a counter with the same name simply creates a new counter of the same name, nested inside the existing counter. https://drafts.csswg.org/css-lists-3/#nested-counters

Füge bei h3::before zu content '(' counters(ebene3,'.') ') ' hinzu, dann siehst du, was passiert: Bei h3-1.3.1 werden zwei ebene3-Zählerstände ausgegeben, "0.1", 0 von h2-1.2 und 1 von h2-1.3.

Ohne diese Vorgehensweise wäre es äußerst aufwändig, Zähler in verschachtelten ol- und ul-Listen einzurichten.
Soweit zur Ursache.

Wie eingangs schon angedeutet, würde ich versuchen, die Dokumentstruktur besser zu organisieren. Auch mir erscheint dein Aufbau etwas unlogisch, denn das erste h3 gehört zum Unterabschnitt im div mit h2-1.3, das zweite h3 zum Hauptteil mit dem h2-1.2. Es mag aber sein, dass das bei dir in der Praxis anders wirken kann.

Falls sich das nicht umorganisieren lässt, kannst du, zumindest in obigem Beispiel, mit counter-reset:none in div > h2 erreichen, dass dort kein neuer (Unter-) Zähler ebene3 angelegt wird. Da Zähler und Werte unterschiedlich weitergegeben werden (https://drafts.csswg.org/css-lists-3/#creating-counters), landet dann tatsächlich der ebene3-Wert vom ersten h3 beim zweiten h3.