Heim > Artikel > Web-Frontend > Ein genauerer Blick auf die Zählfunktion in CSS
In diesem Artikel werden Ihnen die Zählfunktionen in CSS vorgestellt: counter(), counters(). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
【Empfohlenes Tutorial: CSS-Video-Tutorial】
counter gibt eine Zeichenfolge zurück, die den aktuellen Wert des Zählers darstellt. Erhält zwei Parameter, einen Namen und einen Zählstil. counter(name,styleName),name unterscheidet zwischen Groß- und Kleinschreibung und dient als Namensbezeichner für den aktuellen Zähler. Der styleName-Parameter ist optional und stellt den Typ der inkrementierenden Zahlen oder Buchstaben dar. Die zulässigen Parameter sind die von list-style-type unterstützten Typen. Häufig verwendete sind die folgenden:
Weitere Informationen und Kompatibilität finden Sie unter MDN list-style-type
Es gibt zwei Attributwerte im Zusammenhang mit Gegeninteressen:
Counter-Reset wird verwendet, um den CSS-Zähler zurückzusetzen. Der Inhalt des Zurücksetzens umfasst den Namen und die Anfangsnummer. Beispiel:
<div></div> .demo1 { counter-reset: counter1 123; } .demo1:before { content: counter(counter1,simp-chinese-formal); }
Effect
Counter-Inkrement wird verwendet, um das Inkrementintervall des Zählers darzustellen, siehe Code
<p> <section></section> <section></section> <section></section> <section></section> </p> .demo2{ counter-reset: counter2 1; /* counter-increment: counter2 -2; */ } section:before { content: counter(counter2,decimal); counter-increment: counter2 2; }
Effect
Unterstützt grundsätzlich
counters() ist ein verschachtelter Zähler, der zum Definieren des Verbindungscharakters von verschachtelten Zählern verwendet wird. counters(counterName, string, styleName) , empfängt 3 Parameter counterName, string, styleName. Schauen Sie sich den kastanienbraunen
<p> </p><p> 内容一 </p><p> </p><p>子内容一</p> <p>子内容二</p> <p>子内容三</p> <p> 内容二 </p><p> </p><p> 子内容一 </p><p> </p><p>子子内容一</p> <p>子子内容二</p> <p></p> <p></p> <p></p> <p> 内容三 </p> .father { counter-reset: counter3; padding-left: 30px; } .son:before { content: counters(counter3, "-")'.'; counter-increment: counter3; }
-Effekt
an. Listenelemente verwenden Zähler, um Zählverbindungsregeln untereinander zu definieren, mit denen sich leicht eine geordnete Liste simulieren lässt.
Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideos
! !Das obige ist der detaillierte Inhalt vonEin genauerer Blick auf die Zählfunktion in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!