Was ist ein CSS-Zähler (Zähler)?

Der Inhalt dieses Artikels besteht darin, Ihnen vorzustellen, was ein CSS-Zähler (Zähler) ist, damit Sie die zugehörigen Eigenschaften des CSS-Zählers einfach verstehen können. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Was ist ein CSS-Zähler?

Counter ist ein leistungsstarkes Tool von CSS3. Es ist eine Methode, die es uns ermöglicht, Elemente mithilfe von CSS automatisch zu nummerieren. Es kann verwendet werden, um alle Elemente auf der Seite einfach zu zählen und Funktionen zu erreichen, die einer geordneten Liste ähneln. Im Vergleich zu geordneten Listen können CSS-Zähler jedoch jedes Element zählen und auch eine personalisierte Zählung implementieren. [Empfohlene verwandte Video-Tutorials: CSS3-Tutorial]

Verwandte Eigenschaften des CSS-Zählers

1 -reset

Counter-Reset-Attribut wird verwendet, um einen oder mehrere CSS-Zähler zu definieren und zu initialisieren. Es kann einen oder mehrere Bezeichner als Wert annehmen, der den Namen des Zählers angibt.

Syntax verwenden:

counter-reset: [ <标识符> <整数>? ]+ | none | inherit

Jedem Zählernamen kann ein optionaler -Wert folgen, der den Anfangswert des Zählers angibt.

Hinweis:

1) Die Schlüsselwörter none, inherit und initial können nicht als Zählernamen verwendet werden; die Schlüsselwörter none und inherit können als Wert des Counter-Reset-Attributs verwendet werden.

Durch die Einstellung „none“ wird der Zähler zurückgesetzt; durch die Einstellung „inherit“ wird der Zähler-Reset-Wert vom übergeordneten Element des Elements geerbt. Der Standardwert des Counter-Reset-Attributs ist „none“.

2). Der Anfangswert des Zählers ist nicht die erste Zahl/der erste Wert, wenn der Zähler angezeigt wird.

Das bedeutet, dass Sie den Anfangswert beim Zurücksetzen des Zählers auf Null setzen müssen, wenn Sie möchten, dass der Zähler bei 1 angezeigt wird. 0 ist der Standardanfangswert. Wenn Sie ihn also weglassen, wird er standardmäßig auf Null zurückgesetzt. Das Zurücksetzen des Zählers lässt negative Werte zu. Wenn Sie also möchten, dass der Zähler bei Null beginnt, können Sie seinen Anfangswert auf -1 setzen.

Beispiel:

someSelector{ 
    counter-reset: counterA;  /*计数器counterA 初始，初始值为0*/ 
    counter-reset: counterA 6;  /*计数器counterA 初始，初始值为6*/ 
    counter-reset: counterA 4 counterB;  /*计数器counterA 初始，初始值为4，计数器counterB  初始，初始值为0*/ 
    counter-reset: counterA 4 counterB 2;  /*计数器counterA 初始，初始值为4，计数器counterB 初始，初始值为2*/ 
}

2. Zählerinkrement

Das Attribut „Zählerinkrement“ wird verwendet, um den Inkrementwert eines oder mehrerer CSS-Zähler anzugeben . Als Wert werden ein oder mehrere Bezeichner benötigt, die den Namen des zu erhöhenden Zählers angeben.

Verwendung der Syntax:

counter-increment: [ <标识符> <整数>? ]+ | none | inherit

Jedem Zählernamen (Bezeichner) kann ein optionaler -Wert folgen, der angibt, wie viel für jedes Vorkommen des Elements nummeriert wird Der Zähler muss dann erhöht werden. Die Standardinkrementierung beträgt 1. Null und negative ganze Zahlen sind zulässig. Wenn eine negative Ganzzahl angegeben wird, wird der Zähler dekrementiert.

Das Counter-Inkrement-Attribut muss in Verbindung mit dem Counter-Reset-Attribut verwendet werden:

article {    /* 定义和初始化计数器 */
    counter-reset: section; /* 'section' 是计数器的名称 */
}
article h2 {    /* 每出现一次h2,计数器就增加1 */
    counter-increment: section; /* 相当于计数器增量：第1节； */
}

3 counter()-Funktion

<🎜 Die Funktion >counter() muss mit dem Content-Attribut verwendet werden, um einen CSS-Zähler anzuzeigen. Es nimmt einen CSS-Zählernamen als Parameter und übergibt ihn als Wert an die Content-Eigenschaft, die das Pseudoelement :before verwendet, um den Zähler als generierten Inhalt anzuzeigen.

Beispiel:

h2:before {    
    content: counter(section);
}

Die Funktion counter() hat zwei Formen: counter(name) und counter(name, style). Der Parameter

name ist der Name des anzuzeigenden Zählers; verwenden Sie das Attribut counter-reset, um den Namen des Zählers anzugeben.

Der Stilparameter wird verwendet, um den Stil des Zählers zu definieren. Standardmäßig werden Zähler mit Dezimalzahlen formatiert, was bedeutet, dass Zähler Inhalte in Form von Zahlen generieren. Für Zähler sind jedoch auch alle verfügbaren Stile des

css list-style-type attribute verfügbar. Dies bedeutet, dass Sie Dezimalstellenzähler, Zähler, die als römische Zeichen, niedrigalphabetische Zeichen usw. angezeigt werden, erstellen können. Hier sind alle möglichen Zählerstile:

Scheibe: Vollkreisstil

Kreis: Hohlkreisstil

Quadrat: Vollquadratstil

Dezimal: arabische Zahl Stil

lower-roman: Stil römischer Kleinbuchstaben

upper-roman: Stil römischer Großbuchstaben

lower-alpha: Stil englischer Kleinbuchstaben

upper -alpha: englischer Großbuchstabenstil

keine: keine Aufzählungszeichen verwenden

armenianl: traditioneller armenischer Zahlenstil

cjk-ideographic: hellweißer ideografischer Zahlenstil

Georgisch: traditioneller georgischer Zahlenstil

Niedergriechisch: einfacher griechischer Kleinbuchstabenstil

Hebräisch: traditioneller hebräischer Zahlenstil

Hiragana: japanischer Hiragana-Zeichenstil

hiragana-iroha: japanischer Hiragana-Seriennummernstil

katakana: japanischer Katakana-Zeichenstil

katakana-iroha: japanischer Katakana-Seriennummernstil

lower-latin: Kleinbuchstaben Stil lateinischer Buchstaben

Großlatein: Stil lateinischer Großbuchstaben

Das Folgende ist ein Beispiel für die Angabe der Verwendung niederromanischer Zeichen zur Anzeige eines Zählers:

ul li:before {    
content: counter(my-counter, lower-roman);
}

4. counters()-Funktion

Die counters()-Funktion muss auch mit dem Content-Attribut verwendet werden, um CSS-Zähler anzuzeigen. Wie die Funktion counter() wird die Funktion counters() als Wert an das Attribut content übergeben; das Attribut content zeigt dann den Zähler als generierten Inhalt mithilfe des Pseudoelements :before an.

Die Funktion counters() hat auch zwei Formen: counters(name, string) und counters(name, string, style).

name参数也是要显示的计数器的名称。可以使用counter-reset属性来指定计数器的名称。

而counters()函数与counter(）函数（单数形式）区别在于：counters() 函数可以用于设置嵌套计数器。

嵌套计数器是用于为嵌套元素（如嵌套列表）提供自动编号。如果您要将计数器应用于嵌套列表，则可以对第一级项目进行编号，例如，1，2，3等。第二级列表项目将编号为1.1，1.2，1.3等。第三级项目将是1.1.1，1.1.2，1.1.3，1.2.1，1.2.2，1.2.3等。

string参数用作不同嵌套级别的数字之间的分隔符。例如，在'1.1.2'中，点（'.'）用于分隔不同的级别编号。如果我们使用该counters()函数将点指定为分隔符，则它可能如下所示：

content: counters(counterName, ".");

如果希望嵌套计数器由另一个字符分隔，例如，如果希望它们显示为“1-1-2”，则可以使用短划线而不是点作为字符串值：

content: counters(counterName, "-");

和counter(）函数一样，style参数是用来定义计数器的风格。默认情况下，计数器使用十进制数字格式化。具体关于style参数的设置可以参照counter(）函数的style参数。

以下是一个示例，指定嵌套计数器将使用lower-roman字符显示，并使用点作为分隔符：

ul li:before {    
   content: counters(my-counter, ".", lower-roman);
}

css计数器（counter）的示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Tester</title>
        <style type="text/css">
            body{
                counter-reset: section;
            }
            h1{
                counter-reset: subsection;
            }
             
            h1:before{
                counter-increment: section;
                content: counter(section) ".";
            }
             
            h3:before{
                counter-increment: subsection;
                content: counter(section) "." counter(subsection) " ";
            }
        </style>
    </head>
    <body>
        <h1 id="css计数器教程">css计数器教程</h1>
        <h3 id="css计数器">css计数器</h3>
        <h3 id="css计数器的相关属性">css计数器的相关属性</h3>
        <h3 id="示例说明">示例说明</h3>
         
        <h1 id="css计数器教程">css计数器教程</h1>
        <h3 id="css计数器">css计数器</h3>
        <h3 id="css计数器的相关属性">css计数器的相关属性</h3>
        <h3 id="示例说明">示例说明</h3>
    </body>
</html>

效果图：

总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。

Das obige ist der detaillierte Inhalt vonWas ist ein CSS-Zähler (Zähler)?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!