CSS counter-increment Property
Příklad
Vytvořte počítadlo ("my-sec-counter") a zvyšte jej o jeden pro každý výskyt selektoru <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: "Section "
counter(my-sec-counter) ". ";
}
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Tato counter-increment
vlastnost zvyšuje nebo snižuje hodnotu jednoho nebo více čítačů CSS.
Vlastnost counter-increment
se obvykle používá společně s vlastností
counter-reset a vlastností
content .
Výchozí hodnota: | žádný |
---|---|
Zděděno: | Ne |
Animovatelné: | Ne. Přečtěte si o tématu Animable |
Verze: | CSS2 |
Syntaxe JavaScriptu: | objekt .style.counterIncrement = "podsekce"; |
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
Property | |||||
---|---|---|---|---|---|
counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Syntaxe CSS
counter-increment: none|id|initial|inherit;
Hodnoty vlastností
Value | Description |
---|---|
none | Default value. No counters will be incremented |
id number | The id defines which counter to increment. The number sets how much the counter will increment on each occurrence of the selector. The default increment is 1. Negative values are allowed. If id refers to a counter that has not been initialized by counter-reset, the default initial value is 0 |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Další příklady
Příklad
Vytvořte počítadlo ("my-sec-counter") a snižte jej o jednu pro každý výskyt selektoru <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Decrement "my-sec-counter" by 1 */
counter-increment:
my-sec-counter -1;
content: "Section "
counter(my-sec-counter) ". ";
}
Příklad
Číslování sekcí a podsekcí s "Oddíl 1:", "1.1", "1.2" atd.:
body
{
/* Set "section" to 0 */
counter-reset: section;
}
h1
{
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h1::before
{
/* Increment "section" by 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}
h2::before {
/* Increment "subsection" by 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
Příklad
Vytvořte počítadlo a zvyšte jej o jednu (pomocí římských číslic) pro každý výskyt selektoru <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: counter(my-sec-counter,
upper-roman) ". ";
}
Související stránky
CSS reference: ::before pseudo element
CSS reference: ::after pseudo element
CSS reference: vlastnost obsahu
CSS reference: vlastnost counter-reset
Funkce CSS: funkce counter() .
Odkaz HTML DOM: vlastnost counterIncrement