English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS counter Zähler ähneln Variablen. Diese werden von CSS verwaltet und diese Werte können durch CSS-Regeln inkrementiert werden, um ihre Verwendungsanzahl zu verfolgen. Hauptnutzung ist, um die Anzahl der verwendeten Knotenlemente nach spezifischen Regeln zu berechnen.
CSS counter Zähler helfen, einfache auf CSS basierende Inkrementierung und Anzeige von numerischen Inhalten zu generieren.
Nachfolgend ist eine Liste der mit CSS-Zählern verwendeten Eigenschaften aufgeführt：
counter-reset：verwendet, um einen Zähler zu erstellen oder zu zurückzusetzen.
counter-increment：verwendet, um den Zählerwert zu erhöhen.
content：verwendet, um generiertes Inhalt hinzuzufügen.
counter() oder counters() Funktion:verwenden, um den Zählerwert zu einem Element hinzuzufügen.
Lassen Sie uns ein Beispiel nennen, um einen Zähler für die Seite zu erstellen und den Zählerwert für jeden nächsten Element zu erhöhen.
Siehe untenstehendes Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Abschnitt " counter(section) ": ";
}
</style>
</head>
<body>
<h1>CSS Counter Beispiel:</h1>
<h2>Java Anleitung</h2>
<h2>HTML Anleitung</h2>
<h2>CSS Anleitung</h2>
<h2>Oracle Anleitung</h2>
<p><strong>Hinweis:</strong> IE8 Browserunterstützung erfordert!DOCTYPE.</p>
</body>
</html>Testen Sie heraus‹/›Sie können auch einen Zähler innerhalb eines Zählers erstellen. Dies wird als Zählerverzweigung bezeichnet. Lassen Sie uns mit einem Beispiel demonstrieren, wie man einen verflochtenen Zähler verwendet.
Siehe untenstehendes Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "Abschnitt " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>Java Anleitungen:</h1>
<h2>Kern Java Anleitung</h2>
<h2>Servlet Anleitung</h2>
<h2>JSP tutorial</h2>
<h2>Spring tutorial</h2>
<h2>Hibernate tutorial</h2>
<h1>Web technology tutorials:</h1>
<h2>HTML tutorial</h2>
<h2>CSS tutorial</h2>
<h2>jQuery tutorial</h2>
<h2>Bootstrap tutorial</h2>
<h1>Datenbank tutorials:</h1>
<h2>SQL tutorial</h2>
<h2>MySQL tutorial</h2>
<h2>PL/>SQL tutorial</h2>
<h2>Oracle tutorial</h2>
<p><strong>Hinweis:</strong> Nur in Verbindung mit !DOCTYPE unterstützt IE8nur diese Eigenschaften unterstützen.</p>
</body>
</html>Testen Sie heraus‹/›Hinweis:In diesem Beispiel sehen Sie, dass ein Zähler für diesen Abschnitt erstellt wurde und ein weiterer verschachtelter Zähler mit dem Namen subsection in diesem Abschnitt erstellt wurde.
Sie können verschachtelte Zähler verwenden, um Umrisslisten zu erstellen. Dies hilft Ihnen, Strings zwischen verschiedenen Ebenen verschachtelter Zähler einzufügen.
Siehe untenstehendes Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
</style>
</head>
<body>
<h2>unterschiedliche Ebenen der Nestung der Zähler</h2>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
<p><strong>Hinweis:</strong> Nur in Verbindung mit !DOCTYPE unterstützt IE8nur diese Eigenschaften unterstützen.</p>
</body>
</html>Testen Sie heraus‹/›