Wie verwende ich einen Zähler, um Elemente in CSS automatisch zu nummerieren? Verwendung des CSS-Zählers (Codebeispiel)

Wie verwende ich Zähler, um Elemente in CSS automatisch zu nummerieren? In diesem Artikel erfahren Sie, wie Sie CSS-Zähler einrichten und verwenden. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Im vorherigen Artikel [Was ist ein CSS-Zähler (Zähler)] haben wir die relevanten Eigenschaften des CSS-Zählers kurz vorgestellt und anhand von Codebeispielen kurz die Verwendung des CSS-Zählers kennengelernt In diesem Artikel werfen wir einen genaueren Blick darauf, wie man CSS-Zähler einrichtet und verwendet und wie man die automatische Nummerierung von Elementen implementiert. [Empfohlene verwandte Video-Tutorials: CSS3-Tutorial]

1. Richten Sie CSS-Zähler ein und verwenden Sie sie, um eine einfache Elementnummerierung zu implementieren

Um einen CSS-Zähler zu erstellen und zu verwenden, befolgen Sie diese Schritte:

1. Legen Sie den Namen des Zählers fest und setzen Sie ihn auf den Anfangswert unserer Wahl zurück. Dies geschieht mithilfe des Counter-Reset-Attributs.

counter-reset:   标识符（计数器的名称）   <整数>（起始值,可选，默认值为0）;

Die Initialisierung des Zählers (Angabe des Startwerts) ist optional. Wenn kein genauer Wert angegeben wird, beginnt er bei Null und die Zählerimplementierung beginnt zu diesem Zeitpunkt bei „1“.

Das Attribut zum Zurücksetzen des Zählers wird auf das Vorgänger- oder Geschwisterelement des zu nummerierenden Elements gesetzt. Wenn Sie beispielsweise Überschriften in einem Artikel nummerieren, können Sie Zähler für die Vorgänger dieser Überschriften festlegen.

article {     
/ *设置一个名为“section”的计数器，并将其初始化为0 * / 
    counter-reset：section 0 ;
}

Der Grund dafür ist, dass das Zurücksetzen des Zählers für ein nummeriertes Element dazu führt, dass ein Element mit derselben Nummer angezeigt wird. Dies liegt daran, dass der Zähler vor der Anzeige für jeden Titel auf seinen Anfangswert zurückgesetzt und dann erhöht wird.

2. Geben Sie an, wann und um welchen Wert der Zähler erhöht wird.

Wenn Sie beispielsweise möchten, dass der Zähler jedes Mal erhöht wird, wenn der h2-Header erscheint, wird dies mit dem Attribut counter-increment angegeben. Wir können den Zähler für jedes Vorkommen des zu nummerierenden Elements (in diesem Fall h2) um einen beliebigen Wert erhöhen. Standardmäßig wird der Zähler um 1 erhöht; wir können auch negative Werte verwenden, sodass der Zähler dekrementiert wird.

h2 {     
/ *在每次出现h2时使用“section”计数器，并每次出现就增加1（默认值）* / 
    counter-increment：section 1 ;
}

Eine wichtige Sache, die hier zu beachten ist: Der Zähler wird vor der Anzeige erhöht. Wenn wir also möchten, dass der erste Titel bei 1 beginnt, sollten wir den Zähler im Rechner ändern. Der Anfang Der Wert des Counter-Reset-Attributs wird auf Null gesetzt.

3. Den Zähler anzeigen

Nachdem wir den Zähler eingestellt und angegeben haben, wann und um wie viel er erhöht werden soll, müssen wir den Zähler anzeigen .

Um den Zähler anzuzeigen, müssen wir die Funktion counter() des Inhaltsattributs (oder den verschachtelten Zähler counters()) als Wert des Pseudoelements ::before verwenden.

In unserem Beispiel nummerieren wir die h2-Überschriften, sodass wir den Zähler vor der Überschrift anzeigen:

h2 :: before {     
   content：counter（section）;
}

Natürlich, wenn Sie zwischen der Nummer der Überschrift und der Überschrift einige hinzufügen möchten Leerzeichen und möglicherweise andere Trennzeichen. Sie können dies tun, indem Sie das Trennzeichen an die Funktion counter() des Zählers anhängen und eine Zeichenfolge als Wert verwenden, zum Beispiel:

h2::before {    
 /* 在数字之后加一个点，后面加上空格 */
    content: counter(my-counter) ". "; 
}

Lassen Sie mich einen Blick auf das folgende Beispiel werfen:

HTML-Code:

<h2>css计数器的使用</h2>
<p>css计数器的使用css计数器的使用css计数器的使用css计数器的使用css计数器的使用</p>
         
<h2>css计数器的使用</h2>
<p>css计数器的使用css计数器的使用css计数器的使用css计数器的使用css计数器的使用</p>

CSS-Code:

 body{
     counter-reset: section;
}
             
 h2:before{
     counter-increment: section;
     content: counter(section) ".";
}

Rendering:

2. Stellen Sie den Verschachtelungszähler ein, um die Verschachtelungsanzahl der Elemente zu erkennen.

Manchmal gibt es mehrere Überschriften mit 2 Ebenen, Überschriften mit 3 Ebenen und Titel unter einem großen Titel ineinander verschachtelt (z. B. im Bild unten), wie nummeriert man sie?

Jetzt stellen wir die Methode vor, verschachtelte Zähler zu verwenden, um eine verschachtelte Nummerierung von Elementen zu implementieren.

Um eine verschachtelte Nummerierung von Elementen zu implementieren, ist die Verwendung der Funktion counters() ; mit dieser Funktion können wir mehrere Zähler in einer Deklaration festlegen verschachtelt.

Beispieleinführung: Wir werden die Funktion counters() verwenden, um verschachtelte Zähler für verschachtelte Listen festzulegen. Listen (ul, ol) können auf mehreren Ebenen im Markup verschachtelt werden, sodass wir die Funktion counters() verwenden können.

HTML-Code:

<div class="container">
  <ul>
    <li> 菜单1
      <ul>
        <li>菜单1.1</li>
        <li>菜单1.2</li>
        <li>菜单1.3
          <ul>
            <li>菜单1.3.1</li>
            <li>菜单1.3.2</li>
            <li>菜单1.3.3</li>
            <li>菜单1.3.4</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>菜单2
      <ul>
        <li>菜单2.1</li>
        <li>菜单2.2</li>
        <li>菜单2.3</li>
      </ul>
    </li>
  </ul>
</div>

CSS-Code:

Zuerst müssen wir einen Zähler erstellen und den Namen des Zählers als „nested-counter“ definieren , und der Initialisierungswert ist: 0; das Inkrement ist: 1.

ul {     
   list-style: none;/* 去除ul中默认的样式*/
   counter-reset：nested-counter;
}
ul  li {     
   counter-increment：nested-counter;
   line-height: 1.6;
}

Das Anzeigen von Zählern ist einfach. Wir verwenden einen Punkt als Trennzeichen zwischen verschachtelten Zählern und fügen eine schließende Klammer als Trennzeichen zwischen dem Zähler und dem Text im Listenelement ein, nur für Änderungen.

ul  li ：before {     
/ * counters（）函数内的字符串是两个计数器之间的分隔符，并且函数外部的字符串是生成的数字和列表项的文本之间的分隔符* / 
     content: counters(nested-counter, ".") ") ";
     font-weight: bold;
}

Um den Effekt zu erzielen, sehen Sie sich das Bild oben an.

Zwischen zwei Zählern können viele Trennzeichen stehen, wie zum Beispiel „.“, „-“ usw.

3. Counter-Stil

计数器也是可以设置样式的，不仅仅可以用数字来显示编号，还可以是字母（如a，A）,罗马字符（如：ⅰ，ⅱ）等等，只要是css list-style-type属性可用的列表样式类型中的任何一种都可以来设置计数器的样式。在之前的文章【css如何设置列表样式？列表样式的实现】中有介绍，大家可以参考一下。

那么如何设置？

这就需要设置style参数，我们来看看基本语法：

counter(name，style)
counters(name，分隔符，style)

name：计数器名称，style就是样式了。

以下是所有可能的计数器样式：

disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit

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

Das obige ist der detaillierte Inhalt vonWie verwende ich einen Zähler, um Elemente in CSS automatisch zu nummerieren? Verwendung des CSS-Zählers (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!