Letes komplekts - CSS-triki

Satura rādītājs:

Anonim

counter-setCSS īpašums, taisnība, ka tās nosaukumu, nosaka sākuma vērtību CSS letes. Jūs zināt, kā pasūtītie saraksti sākas ar 1 un pēc tam pieaug no turienes? counter-setĪpašums ļauj mums kopumu, kas sāk vērtību kaut kas cits, teiksim, -1. Vai 2. Vai 200! Izņemot to, ka tas tiek piemērots CSS skaitītājiem, nevis sakārtotiem sarakstiem.

Pieņemsim, ka mums ir pielāgots skaitītājs grāmatu nodaļu sarakstam, kur nodaļas numurs ir pievienots nodaļas nosaukumam.

Sākumā mēs definējam skaitītāju ar counter-resetīpašumu. Mēs to sauksim chapterun definēsim vecāku konteineru klasē mūsu nodaļām, kuras sauc par radoši .chapters.

.chapters ( counter-reset: chapter; )

Tālāk mēs piešķirtu chapterskaitītāju elementam, izmantojot counter-incrementīpašumu. Tā kā šīs ir grāmatu nodaļas, mēs tās izmantosim

elementus, pieņemot, ka grāmatas nosaukums būtu

. Ievērojiet, ka mēs to faktiski piešķiram :beforepseidoelementam, jo ​​tas ļauj mums noteikt mūsu skaitītāju faktiskajam

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

Forši, pēdējā lieta, kas mums būtu nepieciešama, ir pateikt letei to, kas tai jāparāda. Tas tiek darīts contentīpašumā, izmantojot counter()funkciju. Mēs arī iemetīsim nelielu krāsu uz letes, jo dizains to prasa.

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

Hei, mēs labi izskatāmies!

Bet pagaidi! Es īsti neraku to, ka mēs sākam ar 1. nodaļu. Es domāju, ka “Pārsūtītājs” patiesībā nav nodaļa. Ja kas, tas ir kā 0. nodaļa.

Tur counter-setienāk! Uzstādīsim lietas sākt ar nulli:

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

Tur mēs ejam! Tā ir labāk. Vienkārši nosakot rekvizīta vērtību skaitītāja nosaukumam, mēs esam iestatījuši nodaļu sarakstu, kas sākas ar 0. nodaļu. Mēs tikpat viegli varētu iestatīt, ka tas sākas ar kaut ko citu, piemēram, 100. nodaļu.

Un, ja pārlūkprogramma neatbalsta counter-set? Nekas, tiešām. To vienkārši ignorēs, un saraksts sāksies pēc noklusējuma 1.

Sintakse

( ? )+ | none

Tas būtībā ir izdomāts veids, kā pateikt, ka īpašumam ir pielāgota skaitītāja nosaukums ( ) un sākuma vērtība ( ). Vai arī iestatiet to uz noneun numerācija sāksies pēc noklusējuma sākuma punkta 1.

  • Sākotnējā vērtība: none
  • Attiecas uz visiem elementiem (ieskaitot ne-vizuālos)
  • Mantots: nē
  • Animācijas tips: pēc aprēķinātās vērtības veida

Vērtības

/* 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;

Ņemiet vērā, ka counter-settiks izveidots jauns skaitītājs, ja tajā deklarētais skaitītāja nosaukums vēl nav definēts kaut kur citur.

Pārlūkprogrammas atbalsts

IE Mala Firefox Chrome Safari Opera
Nē Nē 68+ Nē Nē Nē
Android Chrome Android Firefox Android pārlūks iOS Safari Opera Mini
Nē 79+ Nē Nē Nē
Avots: caniuse

Turpmāka lasīšana

  • CSS sarakstu 3. moduļa specifikācija (darba projekts)
  • Parāda pašreizējo soli ar CSS skaitītājiem
  • Skaitīšana ar CSS skaitītājiem un režģi
  • Kā mainīt CSS pielāgotos skaitītājus