CSS counter-set egenskab

foregående side counter-reset
næste side @counter-style

Definition og brug

counter-set Egenskaben bruges til at oprette og sætte CSS-tæller til en bestemt værdi.

counter-set Egenskaber bruges ofte sammen med counter-increment-egenskaben og content-egenskaben.

Eksempel

Eksempel 1

Opret en tæller ("my-counter"), sæt den til 5 og øg den med 1 hver gang <h2>-vælgeren optræder:

body {
  /* Sæt "my-counter" til 5 */
  counter-set: my-counter 5;
}
h2::before {
  /* Øk "my-counter" med 1 */
  counter-increment: my-counter;
  content: "Section " counter(my-counter) ". ";
}

Prøv det selv

Eksempel 2

Opret en tæller ("my-counter"), sæt den til 5 og reducer den med 1 hver gang <h2>-vælgeren optræder:

body {
  /* Sæt "my-counter" til 5 */
  counter-set: my-counter 5;
}
h2::before {
  /* Sæt "my-counter" til 1 mindre */
  counter-increment: my-counter -1;
  content: "Section " counter(my-counter) ". ";
}

Prøv det selv

Eksempel 3

Brug formater som "Section 10:"、"10.1"、"10.2" til at nummerere kapitler og underkapitler:

body {
  /* Sæt "section" til 9 */
  counter-set: section 9;
}
h1 {
  /* Sett "subsection" til 0 */
  counter-set: subsection 0;
}
h1::before {
  /* Øk "section" med 1 */
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
h2::before {
  /* Øk "subsection" med 1 */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Prøv det selv

Eksempel 4

Opprett en teller, sett den til 9, og øk den med 1 hver gang <h2> valgkriteriet oppstår (bruk romertall):

body {
  /* Sett "my-counter" til 9 */
  counter-set: my-counter 9;
}
h2::before {
  /* Øk "my-counter" med 1 */
  counter-increment: my-counter;
  content: counter(my-counter, upper-roman) ". ";
}

Prøv det selv

CSS syntaks

counter-set: none|counter-name number|initial|inherit;

Egenskapsverdi

Verdi	Beskrivelse
none	Standardverdi. Ikke sett opp teller.
counter-name number	Navnet på telleren som skal settes og verdien. Hver gang valgkriteriet oppstår, settes telleren til denne verdien. Standardverdien er 0.
initial	Sett denne egenskapen til sin standardverdi. Se også initial.
inherit	Arver denne egenskapen fra sin overordnede element. Se også inherit.