css-sayaclari-counter

Sayaçlar ile Otomatik Numaralandırma

CSS sayaçları "değişkenler" gibidir. Değişken değerler CSS kuralları ile artırılabilir (bu, kaç kez kullanıldığını izler).

CSS sayaçlarıyla çalışmak için aşağıdaki özellikleri kullanacağız:

counter-reset - Bir sayaç oluşturur veya sıfırlar

counter-increment - Sayaç değerini artırır

content - Eklenen içerik oluşturuldu

counter() veya counters() işlevi - Bir sayacın değerini bir öğeye ekler

Bir CSS sayacını kullanmak için öncelikle ile oluşturulmalıdır counter-reset.

body {

counter-reset: section;

}

h2::before {

counter-increment: section;

content: "Section " counter(section) ": ";

}



Başka örnek

< !DOCTYPE html>

< html>

< head>

< style>

ol {

counter-reset: section;

list-style-type: none;

}



li::before {

counter-increment: section;

content: counters(section,".") " ";

}

< /style>

< /head>

< body>

< ol>

<li>item</li>

<li>item

<ol>

<li>item</li>

<li>item</li>

<li>item

<ol>

<li>item</li>

<li>item</li>

<li>item</li>

</ol>

</li>

<li>item</li>

</ol>

</li>

<li>item</li>

<li>item</li>

< /ol>

< ol>

<li>item</li>

<li>item</li>

< /ol>

< /body>

< /html>