CSS teen-inkrement 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-increment
eiendom verhoog of verlaag die waarde van een of meer CSS-tellers.
Die counter-increment
eiendom word gewoonlik saam met die
teenterugstel- eienskap en die
inhoudeienskap gebruik .
Standaard waarde: | geen |
---|---|
Geërf: | geen |
Animateerbaar: | geen. Lees oor animeerbaar |
Weergawe: | CSS2 |
JavaScript-sintaksis: | object .style.counterIncrement = "onderafdeling"; |
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
Property | |||||
---|---|---|---|---|---|
counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS-sintaksis
counter-increment: none|id|initial|inherit;
Eiendomswaardes
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 |
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-terugstelling eiendom
CSS funksies: counter () funksie
HTML DOM verwysing: counterIncrement eiendom