CSS -teenterugstelling Eiendom
Voorbeeld
Skep 'n teller ("my-sek-teller") en verhoog dit met een vir elke voorkoms van die <h2>-kieser:
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) ". ";
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die counter-reset
eiendom skep of stel een of meer CSS-tellers terug.
Die counter-reset
eiendom word gewoonlik saam met die
teen-inkrement eiendom en die
inhoud eiendom gebruik.
Standaard waarde: | geen |
---|---|
Geërf: | geen |
Animateerbaar: | geen. Lees oor animeerbaar |
Weergawe: | CSS2 |
JavaScript-sintaksis: | voorwerp .style.counterReset="afdeling" |
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
Property | |||||
---|---|---|---|---|---|
counter-reset | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS-sintaksis
counter-reset: none|name number|initial|inherit;
Eiendomswaardes
Value | Description |
---|---|
none | Default value. No counters will be reset |
id number | The id defines which counter to reset. The number sets the value the counter is reset to on each occurrence of the selector. The default number 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 |
Meer voorbeelde
Voorbeeld
Skep 'n teller ("my-sek-teller") en verminder dit met een vir elke voorkoms van die <h2>-kieser:
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) ". ";
}
Voorbeeld
Nommer afdelings en onderafdelings met "Afdeling 1:", "1.1", "1.2", ens.:
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) " ";
}
Voorbeeld
Skep 'n teller en verhoog dit met een (gebruik Romeinse syfers) vir elke voorkoms van die <h2>-kieser:
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) ". ";
}
Verwante bladsye
CSS verwysing: ::before pseudo element
CSS-verwysing: ::na pseudo-element
CSS verwysing: inhoud eiendom
CSS verwysing: teen-inkrement eiendom
CSS funksies: counter () funksie
HTML DOM verwysing: counterReset eiendom