CSS sayıcı ayarlama özelliği
- Önceki sayfa counter-reset
- Son sayfa @counter-style
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) ". "; }
Ö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) ". "; }
Ö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) " "; }
Ö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) ". "; }
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
- Önceki sayfa counter-reset
- Son sayfa @counter-style