Share
Visste du at med CSS kan du opprette en disk? Dette kan være spesielt nyttig for tilfeller hvor tellingen er rent nødvendig for presentasjonsformål. Jeg skal vise deg hvordan du skal bruke teller-inkrement i dette nyttige raske tipset.
Det er egentlig ganske enkelt. Vi snakker ikke engang CSS3 her; de teller-inkrement eiendommen har eksistert en stund nå. Det er bare at mange av oss ikke er kjent med det, eller har ikke funnet bruk for det.
Vi begynner med å bruke teller-inkrement eiendom. La oss forestille oss at vi har et sett med bokser, og hver boks skal vise et tall som tilsvarer rekkefølgen som boksen oppstår, er dens rekkefølge.
.boks counter-increment: boxes;
De
teller-inkrementeiendom kan akseptere enten ett eller to egenskaper. Den første er enidsom du senere vil bruke til å referere til denne spesifikke telleren. Du kan også sende en andre parameter som refererer til økningen. For eksempel, i stedet for 1, 2, 3, 4, du kan bytte til 5, 10, 15, 20 ved å søke:counter-increment: bokser 5.
Denne koden vil nå lagre et unikt nummer for hvert element som har en klasse av eske. Men selvfølgelig vil vi få dette nummeret på siden. Forhåpentligvis vil vi, på et tidspunkt i fremtiden, kunne bruke innhold eiendom innenfor standardvalgere, men ikke helt ennå. I stedet bruker vi pseudoelementer til å bruke innholdet.
.boks: etter innhold: teller (bokser);
Dette vil gjelde et unikt nummer - igjen, basert på elementets rekkefølge i sekvensen - til .eske element. Skal vi måtte tilbakestille denne bestillingen tilbake til 1 På et tidspunkt kunne vi usethe counter-reset: bokser eiendom.
Nå kan du fortsatt tenke: "Hvorfor skulle jeg noen gang bruke dette?" Det er mange situasjoner når det kan være nyttig. For eksempel, vurder en kommentar-del av en blogg. Hvis du ønsket å gi
et nummer for hver kommentar i settet - muligens litt gjennomsiktig - du kan bruke denne teknikken. Tallet er ikke avgjørende for oppslaget, og brukes kun til presentasjon. I disse tilfellene, CSS
tellere vil gjøre trikset pent!
Accentsconagua