CSS karşı artış Ö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-increment
, bir veya daha fazla CSS sayacının değerini artırır veya azaltır.
Özellik counter-increment
genellikle
sayaç sıfırlama ö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.counterIncrement = "alt 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-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS Sözdizimi
counter-increment: none|id|initial|inherit;
Mülk değerleri
Value | Description |
---|---|
none | Default value. No counters will be incremented |
id number | The id defines which counter to increment. The number sets how much the counter will increment on each occurrence of the selector. The default increment is 1. Negative values are allowed. If id refers to a counter that has not been initialized by counter-reset, the default initial 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ı: sayaç sıfırlama özelliği
CSS işlevleri: sayaç() işlevi
HTML DOM referansı: counterIncrement özelliği