Števec - CSS-triki

Kazalo:

Anonim

Lastnost counter-setCSS, ki ustreza svojemu imenu, nastavi začetno vrednost za števec CSS. Veste, kako se urejeni seznami začnejo pri 1 in nato od tam povečujejo? counter-setLastnost nam omogoča, da niz, ki se začne vrednost za kaj drugega, recimo, -1. Ali 2. Ali 200! Le da se uporablja za števce CSS namesto za urejene sezname.

Recimo, da imamo števec po meri za seznam poglavij knjig, kjer je številka poglavja dodana imenu poglavja.

Začeli bi z določitvijo števca z counter-resetlastnostjo. Bomo ga pokličete chapterin se opredeli na matični kontejnerjev razred za naše poglavij ti, ustvarjalno .chapters.

.chapters ( counter-reset: chapter; )

Nato bi chapterštevcu dodelili element, ki uporablja counter-incrementlastnost. Ker gre za poglavja v knjigah, jih bomo uporabili

elementi, ob predpostavki, da bi bil naslov knjige

. Upoštevajte, da ga dejansko dodeljujemo :beforepsevdoelementu, saj nam omogoča, da naš števec dodamo dejanskemu

element. 
h2:before ( counter-increment: chapter; )

Kul, zadnja stvar, ki bi jo potrebovali, je, da števcu povemo, kaj naj prikaže. To se naredi na contentlastnosti prek counter()funkcije. Na pult bomo vrgli tudi malo barve, saj dizajn to zahteva.

h2:before ( color: red; content: "Chapter " counter(chapter) ": "; counter-increment: chapter; )

Hej, dobro izgledamo!

Ampak počakaj! Pravzaprav ne poglabljam dejstva, da smo začeli s 1. poglavjem. Mislim, "Naprej" v resnici ni poglavje. Če sploh, je kot v poglavju 0.

Tu counter-setpride! Nastavimo stvari tako, da se začnejo na nič:

h2:first-of-type::before ( counter-set: chapter; )

No pa gremo! To je bolje. Z nastavitvijo vrednosti lastnosti na ime števca smo seznam poglavij nastavili tako, da se začne pri poglavju 0. Lahko bi ga prav tako enostavno nastavili pri nečem drugem, kot je poglavje 100.

In če brskalnik ne podpira counter-set? Nič zares. To bo enostavno ignorira in seznam se bo pričel ob svojem privzeto 1.

Sintaksa

( ? )+ | none

To je v bistvu izmišljen način, da lastnost poimenuje števec po meri ( ) in začetno vrednost ( ). Ali pa nastavite nonein oštevilčenje se bo začela ob privzeto izhodišče, 1.

  • Začetna vrednost: none
  • Velja za: vse elemente (vključno z nevizualnimi)
  • Podedovano: ne
  • Vrsta animacije: po izračunani vrednosti

Vrednote

/* Set "awesome-counter" to 0 */ counter-set: awesome-counter; /* Set "awesome-counter" to -10 */ counter-set: awesome-counter -10; /* Set "awesome1" to 0, and "awesome2" to 2 */ counter-set: awesome1 awesome2 2; /* Wipe out any other settings that may have been declared elsewhere */ counter-set: none; /* Global values */ counter-set: inherit; counter-set: initial; counter-set: unset;

Upoštevajte, da counter-setbo ustvaril nov števec, če ime števca, navedeno na njem, še ni bilo določeno drugje.

Podpora brskalnika

IE Rob Firefox Chrome Safari Opera
Ne Ne 68+ Ne Ne Ne
Android Chrome Android Firefox Brskalnik Android iOS Safari Opera Mini
Ne 79+ Ne Ne Ne
Vir: kanius

nadaljnje branje

  • Specifikacija modula seznamov CSS 3. stopnje (delovni osnutek)
  • Prikaz trenutnega koraka s števci CSS
  • Štetje s števci CSS in mrežo
  • Kako obrniti števce po meri CSS