Eine Anleitung zum CSS-Zähler

Blog

Eine Anleitung zum CSS-Zähler

Verwenden Sie die Counter-Eigenschaft, um jedes Element in eine nummerierte Liste umzuwandeln. Ähnlich wie das sortierte Listen-Tag funktioniert |_+_|. Sehr nützlich, wenn Sie eine Dokumentationsseite erstellen, auf der Sie die Überschriften automatisch nummerieren oder ein Inhaltsverzeichnis erstellen müssen

Phönix Sonnen Livestream Reddit
    div { /* Define & Initialize Counter */ counter-reset: tidbit-counter; } h2::before { /* Increment Counter */ counter-increment: tidbit-counter; /* Display Counter */ content: counter(tidbit-counter) ': '; }

    So funktioniert die Zählereigenschaft

    Es gibt 3 Schritte, um den Zähler zum Laufen zu bringen:

    1. Zähler definieren & initialisieren
    2. Zähler inkrementieren
    3. Zähler anzeigen

    1. Zähler definieren & initialisieren

    Dieser Schritt besteht aus 2 Teilen. Sie müssen Ihren Zähler definieren und ihm einen Namen geben.

    1a. Zähler definieren Ich habe meine |_+_| genannt. Wir geben ihm einen Namen, damit wir ihn in den späteren Schritten aufrufen können.

    HTML

    CSS

    JS

    1b. Zähler initialisieren

    Der nächste Teil besteht darin, Ihren Zähler zu initialisieren. Standardmäßig ist der Wert |_+_|. Beachten Sie, dass diese Nummer nicht angezeigt wird. Hier legen Sie den Anfang Ihres Zählers fest. Wenn ich diese Zahl also auf |_+_| gesetzt hätte, würde meine Ausgabe |_+_| sein. Angenommen, mein Inkrement ist |_+_| (dazu später mehr).

    Eine Anleitung zum CSS-Zähler

    Hier ist ein Beispiel:

    tidbit-counter counter-reset: tidbit-counter; 0

    Wo kann das |_+_| . angewendet werden? Eigentum?

    Sie möchten die |_+_| . anwenden -Eigenschaft des übergeordneten Elements. Folgendes passiert, wenn Sie es nicht auf die Eltern anwenden.

    20

    Und hier ist die Ausgang . Wie Sie bemerkt haben, wird es nicht richtig inkrementiert

    21, 22, 23...etc

    Es muss auch nicht der direkte Elternteil sein. Solange es sich um ein HTML-Element handelt, das Ihre Zählerliste umschließt. Du bist gut. So was:

    1 div { counter-reset: tidbit-counter 58; /* */ } h2::before { counter-increment: tidbit-counter; content: counter(tidbit-counter) ': '; }

    HTML

    CSS

    JS

    2. Zähler inkrementieren

    Sobald Sie Ihren Zähler eingerichtet haben. Jetzt können Sie mit der Erhöhung beginnen. Hier ist die Syntax für diese Eigenschaft:

    59: HTML 60: CSS 61: JS

    Wie Sie bemerkt haben, akzeptiert es ein ganzzahliges Argument. Das heißt, Sie sind nicht darauf beschränkt, den Zählerwert nur um |_+_| zu erhöhen. Das folgende Diagramm geht davon aus, dass |_+_| ist |_+_|.

    Eine Anleitung zum CSS-Zähler

    Und ja, Sie können auch eine negative ganze Zahl eingeben, um den Zähler zu verringern. Okay, mal sehen, wie das umgesetzt wird:

    counter-reset counter-reset /* ❌ Wrong */ h2 { counter-reset: tidbit-counter; } h2::before { counter-increment: tidbit-counter; content: counter(tidbit-counter) ': '; }

    3. Zähler anzeigen

    Um den Zähler anzuzeigen, müssen wir schließlich |_+_| . übergeben Funktion als Wert für unsere |_+_| Eigentum. Die |_+_| -Eigenschaft ist oft der Weg für uns, Wert in unserem HTML durch CSS anzuzeigen. Hier ist die Syntax für unser |_+_| Funktion.

    1: HTML 1: CSS 1: JS

    Standardmäßig arbeiten wir mit Nummern. Und das ist die Standardeinstellung |_+_| oder in den Dokumenten nennen sie es |_+_|. Sie können aber auch andere |_+_| übergeben.

    Eine Anleitung zum CSS-Zähler

    React-native-searchable-dropdown

    Sie können die vollständige Liste der Stile sehen Hier

    Und schauen wir uns ein Beispiel an:

    HTML

    CSS

    JS

    /* ✅ This works */ section { counter-reset: tidbit-counter; } 1: HTML 2: CSS 3: JS

    Mehrere Zähler

    Sie können auch mehrere Zähler festlegen, indem Sie einfach einen anderen Zählernamen definieren.

    counter-increment: 1 counter-reset

    Verschachtelter Zähler

    Sie können auch einen verschachtelten Zähler festlegen. Anstelle von |_+_| verwenden Sie die Pluralform |_+_|. Die |_+_| akzeptiere ein zusätzliches Argument:

    0

    Das Zeichenfolgenargument ist ein Zeichenfolgentrennzeichen, mit dem Sie angeben, wie Sie das Listenelement für verschachtelte Leistungsindikatoren trennen möchten.
    Eine Anleitung zum CSS-Zähler

    Schauen wir uns ein Beispiel an:

    div { counter-reset: tidbit-counter; } h2::before { counter-increment: tidbit-counter -5; /* */ content: counter(tidbit-counter) ': '; }

    HTML

    CSS

    JS

    -5: HTML -10: CSS -15: JS

    Zähler gegen |_+_|

    CSS-Zähler ersetzt |_+_| nicht. Wenn Sie eine nummerierte geordnete Liste haben, sollten Sie unbedingt noch |_+_| . verwenden denn es ist wichtig, dass Sie Ihren HTML-Code mit der richtigen Semantik strukturieren. Semantisches Markup ist entscheidend für Barrierefreiheit und SEO.

    |_+_| für den Sieg

    Hier ist ein Beispiel, in dem ich |_+_| verwenden sollte. In diesem Fall liste ich nur eine Reihe von Regeln auf. Es ist semantisch sinnvoll, eine geordnete Liste |_+_| zu verwenden.

    counter

    CSS|_+_| für den Sieg

    Hier ist ein Beispiel, in dem ich CSS |_+_| verwenden würde. In diesem Fall habe ich eine Dokumentationsseite mit Überschriften |_+_| und Absätze |_+_|. In diesem Beispiel ist ein Zähler eher eine visuelle Präsentation. Dieses Beispiel wäre mit CSS |_+_| sinnvoll.

    at&t Telefonnummer zum Zurücksetzen des Passworts
    content content

    ☝️Kannst du sagen, dass ich Vue.js wirklich mag?

    Browser-Unterstützung

    Das CSS |_+_| wird von allen gängigen Browsern unterstützt, einschließlich Internet Explorer 8 und höher.

    Kann ich verwenden: CSS-Zähler

    Ursprünglich veröffentlicht bei https://www.samanthaming.com

    #css #css3 #webdev

    www.samanthaming.com

    Eine Anleitung zum CSS-Zähler

    Mit CSS-Zählern können Sie das Erscheinungsbild von Inhalten basierend auf seiner Position im Dokument anpassen. CSS-Zähler sind von CSS verwaltete 'Variablen', deren Werte durch CSS-Regeln erhöht werden können