CSS karşı sıfırlama Özelliği
Örnek
Bir sayaç ("saniye sayacı") oluşturun ve bunu <h2> seçicisinin her oluşumu için bir artırın:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: "Section "
counter(my-sec-counter) ". ";
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Özellik counter-reset
, bir veya daha fazla CSS sayacı oluşturur veya sıfırlar.
Özellik counter-reset
genellikle
karşı artış özelliği ve
içerik özelliği ile birlikte kullanılır.
Varsayılan değer: | Yok |
---|---|
Miras: | Hayır |
canlandırılabilir: | Hayır. Canlandırılabilir hakkında bilgi edinin |
Sürüm: | CSS2 |
JavaScript sözdizimi: | nesne .style.counterReset="bölüm" |
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Property | |||||
---|---|---|---|---|---|
counter-reset | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS Sözdizimi
counter-reset: none|name number|initial|inherit;
Mülk değerleri
Value | Description |
---|---|
none | Default value. No counters will be reset |
id number | The id defines which counter to reset. The number sets the value the counter is reset to on each occurrence of the selector. The default number value is 0 |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Daha fazla örnek
Örnek
Bir sayaç ("saniye sayacı") oluşturun ve <h2> seçicisinin her oluşumu için bir azaltın:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Decrement "my-sec-counter" by 1 */
counter-increment:
my-sec-counter -1;
content: "Section "
counter(my-sec-counter) ". ";
}
Örnek
Bölümlerin ve alt bölümlerin "Bölüm 1:", "1.1", "1.2" vb. ile numaralandırılması:
body
{
/* Set "section" to 0 */
counter-reset: section;
}
h1
{
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h1::before
{
/* Increment "section" by 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}
h2::before {
/* Increment "subsection" by 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
Örnek
Bir sayaç oluşturun ve <h2> seçicisinin her oluşumu için (Roma rakamları kullanarak) bir artırın:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: counter(my-sec-counter,
upper-roman) ". ";
}
İlgili Sayfalar
CSS referansı: ::sözde öğeden önce
CSS referansı: ::sözde öğeden sonra
CSS referansı: içerik özelliği
CSS referansı: karşı artış özelliği
CSS işlevleri: sayaç() işlevi
HTML DOM referansı: counterReset özelliği