Protinastavenie - Triky CSS

counter-resetVlastnosť umožňuje automatické číslovanie prvkov. Rovnako ako objednaný zoznam (

), ale funguje na ľubovoľnom prvku. Je to obzvlášť užitočné pri vytváraní obsahu alebo číslovania záhlaví pre niečo ako diplomovú prácu. Počítadlá sa používajú prostredníctvom vlastnosti content. Jednoduchý príklad:

article ( counter-reset: section; ) section ( counter-increment: section; ) section h2:before ( content: counter(section) '. '; )

counter-resetVlastnosť sa používa na vynulovanie čítača CSS na danú hodnotu.

Je súčasťou modulu počítadla CSS, ktorý je súčasťou generovaného obsahu, automatického číslovania a uvádza špecifikáciu CSS2.1, ktorá je rozšírená o špecifikáciu modulu generovaného a nahradeného obsahu CSS3.

Syntax

counter-reset: ( ?)+ | none

Kde…

• je názov počítadla, ktoré chcete vynulovať
• je hodnota, na ktorú sa má vynulovať počítadlo
• none deaktivovať počítadlo

body ( counter-reset: my-awesome-counter 0; )

Poznámka: predvolená hodnota pre celé číslo je 0. Ak za menom počítadla nie je nastavené celé číslo, obnoví sa hodnota 0. Takto to funguje podľa očakávania:

body ( counter-reset: my-awesome-counter; )

Môžete resetovať niekoľko počítadiel naraz pomocou zoznamu oddeleného medzerami, každý so svojou konkrétnou hodnotou, ak si to prajete.

body ( counter-reset: my-awesome-counter 5 my-other-counter; )

Týmto sa resetuje my-awesome-counterna 5 a my-other-counterpredvolená hodnota: 0.

Môžete vidieť tento zoznam ako: counter1 value1 counter2 value2 counter3 value3… . Ak je hodnota vynechaná, je to 0.

Ukážka

V nasledujúcej ukážke sa articlevynuluje sectionpočítadlo na jeho predvolenú hodnotu (0), ktorá sa potom zvyšuje pri každom výskyte sekcie a potom sa zobrazuje pred nadpismi sekcií.

Vyskúšajte toto pero!

Viac informácií

• protizreset v spec
• protinastavenie pri MDN

Podpora prehľadávača

Chrome	Safari	Firefox	Opera	IE	Android	iOS
2+	3,1+	akýkoľvek	9,2+	8+	akýkoľvek	akýkoľvek