Karşı sıfırlama - CSS Hileleri

counter-resetMülkiyet elemanlarının otomatik numaralandırma için izin verir. Sıralı bir liste gibi (

), ancak herhangi bir öğe üzerinde çalışır. Tez makalesi gibi bir şey için bir içindekiler tablosu oluştururken veya başlıkları numaralandırırken özellikle kullanışlıdır. Sayaçlar, içerik özelliği aracılığıyla uygulanır. Basit bir örnek:

article ( counter-reset: section; ) section ( counter-increment: section; ) section h2:before ( content: counter(section) '. '; )

counter-resetTesiste verilen değere CSS sayacını sıfırlamak için kullanılır.

Oluşturulan içeriğin, otomatik numaralandırmanın bir parçası olan ve Oluşturulan ve Değiştirilen İçerik Modülü CSS3 spesifikasyonunda genişletilmiş CSS2.1 spesifikasyonunu listeleyen CSS sayaç modülünün bir parçasıdır.

Sözdizimi

counter-reset: ( ?)+ | none

Nerede…

• sıfırlamak istediğiniz sayacın adıdır
• sayacı sıfırlanacak değer
• none sayacı devre dışı bırak

body ( counter-reset: my-awesome-counter 0; )

Not: Tamsayı için varsayılan değer 0'dır. Sayaç adından sonra bir tam sayı ayarlanmadıysa, 0'a sıfırlanacaktır. Bu nedenle, beklendiği gibi çalışır:

body ( counter-reset: my-awesome-counter; )

Boşluklarla ayrılmış bir listeyle birden fazla sayacı, isterseniz her biri kendi özel değerine sahip olacak şekilde sıfırlayabilirsiniz.

body ( counter-reset: my-awesome-counter 5 my-other-counter; )

Bu, my-awesome-counter5'e ve my-other-countervarsayılan değer olan 0'a sıfırlanacaktır .

Sen bu listeyi görebilirsiniz: counter1 value1 counter2 value2 counter3 value3… . Bir değer atlanırsa 0'dır.

Demo

Aşağıdaki demoda, sayacı varsayılan değerine (0) articlesıfırlar section, bu daha sonra her bölüm oluşumunda artırılır ve ardından bölüm başlıklarının önünde görüntülenir.

Bu Kaleme bakın!

Daha fazla bilgi

• spesifikasyonda karşı sıfırlama
• MDN'de karşı sıfırlama

Tarayıcı Desteği

Krom	Safari	Firefox	Opera	IE	Android	iOS
2+	3.1+	Hiç	9.2+	8+	Hiç	Hiç