CSS counters() fonksiyonu

tanımı ve kullanımı

CSS'nin counters() Fonksiyon, adlandırılmış sayıcı ve iç içe sayıcıların mevcut değerlerini döndürür.

Burada, şu kullanıyoruz counters() Fonksiyon, farklı seviyelerdeki iç içe sayıcılar arasında bir dizgi ekler.

örnek

örnek 1

Burada, şu kullanıyoruz counters() Fonksiyon, farklı seviyelerdeki iç içe sayıcılar arasında bir dizgi ekler (bir nokta):

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

Kişisel olarak deneyin

örnek 2

Sayıcı tarzını ayarlayın ve bağlantı dizisini "-" olarak belirleyin:

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section, "-", lower-alpha) " ";
}

Kişisel olarak deneyin

CSS grameri

counters(countername, string, counterstyle)
değer tanım
countername

zorunlu. Sayıcı adı (counter-reset ve counter-increment özelliklerinde kullanılan adla aynı olmalıdır).

Dikkat: adlar büyük/küçük harfe duyarlıdır.
string zorunlu. Bağlantı dizisi. Herhangi bir sayıda metin karakteri olabilir.
counterstyle

seçmeli. Sayıcı tarzı (list-style-type değeri, @counter-style adı veya symbols() fonksiyonu olabilir).

varsayılan değeri decimal'dir.

teknik ayrıntılar

Sürüm: CSS3

tarayıcı destek

Chrome Edge Firefox Safari Opera
destek destek destek destek destek

相关页面

Rehber:CSS Sayacı

Referans:CSS içerik özelliği

Referans:CSS sayacı artırma özelliği

Referans:CSS sayacı sıfırlama özelliği

Referans:CSS @counter-style kuralı

Referans:CSS counter() fonksiyonu