Share
Wussten Sie, dass Sie mit CSS einen Zähler erstellen können? Dies kann insbesondere in Fällen nützlich sein, in denen die Zählung für Präsentationszwecke erforderlich ist. Ich zeige dir wie man es benutzt Gegeninkrement in diesem nützlichen schnellen Tipp.
Es ist wirklich ganz einfach. Wir sprechen hier nicht einmal über CSS3. das Gegeninkrement Eigentum ist jetzt schon eine Weile her. Es ist nur so, dass viele von uns nicht damit vertraut sind oder keine Verwendung dafür gefunden haben.
Wir beginnen mit der Anwendung der Gegeninkrement Eigentum. Stellen wir uns vor, wir haben eine Reihe von Boxen, und jede Box sollte eine Zahl anzeigen, die der Reihenfolge entspricht, in der die Box in ihrer Reihenfolge vorkommt.
.Kästchen Gegeninkrement: Kästchen;
Das
GegeninkrementEigenschaft kann eine oder zwei Eigenschaften annehmen. Der erste ist einIch würdedas Sie später verwenden, um auf diesen bestimmten Zähler zu verweisen. Sie können auch einen zweiten Parameter übergeben, der sich auf das Inkrement bezieht. Zum Beispiel statt 1, 2, 3, 4, Sie könnten zu wechseln 5, 10, 15, 20 durch Auftragen:Gegenschritt: Kästchen 5.
Dieser Code speichert jetzt eine eindeutige Nummer für jedes Element mit einem Klasse von Box. Natürlich möchten wir diese Nummer auf der Seite bekommen. Hoffentlich werden wir irgendwann in der Lage sein, die Inhalt Eigenschaft innerhalb von Standardselektoren, aber noch nicht ganz. Stattdessen verwenden wir Pseudoelemente, um den Inhalt anzuwenden.
.Box: nach Inhalt: Zähler (Boxen);
Dadurch wird - wiederum basierend auf der Reihenfolge des Elements in der Reihenfolge - eine eindeutige Nummer für das Element vergeben .Box Element. Müssen wir diese Bestellung zurücksetzen auf 1 irgendwann könnten wir das verwenden Gegen-Reset: Boxen Eigentum.
Nun denkst du vielleicht immer noch: "Warum sollte ich das jemals benutzen?" Es gibt viele Situationen, in denen es nützlich sein könnte. Betrachten Sie beispielsweise einen Kommentarbereich eines Blogs. Wenn Sie etwas zur Verfügung stellen wollten
eine Zahl für jeden Kommentar im Set - möglicherweise etwas transparent - Sie könnten diese Technik verwenden. Die Nummer ist für das Markup nicht wichtig und wird nur zur Präsentation verwendet. In diesen Fällen CSS
Zähler werden den Trick gut machen!
Accentsconagua