CSS räknare sätta egenskap

Föregående sida counter-reset
Nästa sida @counter-style

Definition och användning

counter-set Egenskapen används för att skapa och sätta CSS-räknaren till ett specifikt värde.

counter-set Egenskaper används ofta tillsammans med counter-increment-egenskapen och content-egenskapen.

Exempel

Exempel 1

Skapa en räknare ("my-counter"), sätt den till 5 och öka den med 1 varje gång <h2>-väljaren dyker upp:

body {
  /* Sätt "my-counter" till 5 */
  counter-set: my-counter 5;
}
h2::before {
  /* Öka "my-counter" med 1 */
  counter-increment: my-counter;
  content: "Section " counter(my-counter) ". ";
}

Prova själv

Exempel 2

Skapa en räknare ("my-counter"), sätt den till 5 och minska den med 1 varje gång <h2>-väljaren dyker upp:

body {
  /* Sätt "my-counter" till 5 */
  counter-set: my-counter 5;
}
h2::before {
  /* Sätt "my-counter" till 5 */
  counter-increment: my-counter -1;
  content: "Section " counter(my-counter) ". ";
}

Prova själv

Exempel 3

Använd format som "Section 10:"、"10.1"、"10.2" för att numrera kapitel och underkapitel:

body {
  /* Sätt "section" till 9 */
  counter-set: section 9;
}
h1 {
  /* Sätt "subsection" till 0 */
  counter-set: subsection 0;
}
h1::before {
  /* Öka "section" med 1 */
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
h2::before {
  /* Öka "subsection" med 1 */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Prova själv

Exempel 4

Skapa en räknare, sätt den till 9 och öka den med 1 vid varje upprepning av <h2>-valaren (använd romerska siffror):

body {
  /* Sätt "my-counter" till 9 */
  counter-set: my-counter 9;
}
h2::before {
  /* Öka "my-counter" med 1 */
  counter-increment: my-counter;
  content: counter(my-counter, upper-roman) ". ";
}

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde	Beskrivning
none	Standardvärde. Ställ inte in räknare.
counter-name number	Att ställa in räknarnamnet och dess värde. Varje gång valaren uppstår, sätts räknaren till detta värde. Standardvärdet är 0.
initial	Sätt denna egenskap till dess standardvärde. Se också initial.
inherit	Inherritar egenskapen från föräldrelementet. Se också inherit.

Standardvärde:	none
Arv:	Nej
Animation skapad av:	Stöds inte. Se också:Animation relaterade egenskaper.
Version:	CSS2
JavaScript-syntax:	object.style.counterSet="4"