CSS sayıcı ayarlama özelliği

Tanım ve Kullanım

counter-set Özellik, CSS sayacı oluşturmak ve belirli bir değere ayarlamak için kullanılır.

counter-set Özellikler genellikle counter-increment ve content özellikleriyle birlikte kullanılır.

Örnek

Örnek 1

Bir sayacı ("my-counter") oluştur, onu 5 olarak ayarla ve <h2> seçicisinin her出现出现时 onu 1 artır:

body {
  /* "my-counter"'ı 5 olarak ayarla */
  counter-set: my-counter 5;
}
h2::before {
  /* "my-counter" 1 artır */
  counter-increment: my-counter;
  content: "Section " counter(my-counter) ". ";
}

Kişisel olarak deneyin

Örnek 2

Bir sayacı ("my-counter") oluştur, onu 5 olarak ayarla ve <h2> seçicisinin her出现出现时 onu 1 azalt:

body {
  /* "my-counter"'ı 5 olarak ayarla */
  counter-set: my-counter 5;
}
h2::before {
  /* "my-counter"'ı 1 azalt */
  counter-increment: my-counter -1;
  content: "Section " counter(my-counter) ". ";
}

Kişisel olarak deneyin

Örnek 3

Bölüm ve alt bölümler numaralandırmak için "Section 10:", "10.1", "10.2" gibi formatları kullan:

body {
  /* "section"'ı 9 olarak ayarla */
  counter-set: section 9;
}
h1 {}}
  /* "subsection" 0 olarak ayarlanır */
  counter-set: subsection 0;
}
h1::before {
  /* "section" 1 artır */
  counter-increment: section;
  content: "Bölüm " counter(section) ": ";
}
h2::before {
  /* "subsection" 1 artır */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Kişisel olarak deneyin

Örnek 4

Bir sayac oluşturun, 9 olarak ayarlayın ve <h2> seçicisi her ortaya çıktığında 1 artırın (Roma rakamları kullanarak):

body {
  /* "my-counter" 9 olarak ayarlanır */
  counter-set: my-counter 9;
}
h2::before {
  /* "my-counter" 1 artır */
  counter-increment: my-counter;
  content: counter(my-counter, upper-roman) ". ";
}

Kişisel olarak deneyin

CSS dilbilgisi

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

Özellik değeri

Değer Açıklama
none Varsayılan değer. Sayac ayarlanmaz.
counter-name number

Ayarlama yapılacak sayac adı ve değeri.

Seçici her ortaya çıktığında, sayac bu değere ayarlanır.

Varsayılan değer 0'dır.

initial Bu özelliği varsayılan değerine ayarlar. İlgili: initial.
inherit Bu özelliği ebeveyn elementinden devralır. İlgili: inherit.
Varsayılan değer: none
Geçişlilik: Hayır
Animasyon yapımı: Desteklenmiyor. İlgili:Animasyonla ilgili özellikler.
Sürüm: CSS2
JavaScript dilbilgisi: object.style.counterSet="4"

Tarayıcı desteği

Tabloda sayılar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

Chrome Edge Firefox Safari Opera
85 85 68 17.2 71

İlgili sayfalar

İlgili:::before sahte elementi

İlgili:::after sahte elementi

İlgili:CSS içerik özelliği

İlgili:CSS sayacı artırma özelliği

İlgili:CSS counter() fonksiyonu