Xüsusiyyət counter-increment

counter-increment xüsusiyyəti elementlərin, məsələn, abzasların və ya başlıqların avtomatik nömrələnməsini təyin edir. counter-reset xüsusiyyəti ilə birlikdə, after və before psevdoelementləri, content xüsusiyyəti ilə birlikdə istifadə olunur, counter funksiyası istifadə olunur. Daha yaxşı başa düşmək üçün nümunələrə nəzər yetirməyi məsləhət görürəm.

Sintaksis

cssselektor {
  counter-increment: ad [addım] | none;
}

Dəyərlər

Standart dəyər: none.

Nümunə

Gəlin abzasların avtomatik nömrələnməsini təmin edək:

html<div id="parent">
  <p>mətn</p>
  <p>mətn</p>
  <p>mətn</p>
  <p>mətn</p>
  <p>mətn</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test;
  content: counter(test);
}

Результат:

Nümunə

Tutaq ki, nömrələmə ilə yanaşı, hər hansı bir mətn də əlavə olunur. Bizim vəziyyətimizdə rəqəmdən əvvəl № və sonra nöqtə:

html<div id="parent">
  <p>mətn</p>
  <p>mətn</p>
  <p>mətn</p>
  <p>mətn</p>
  <p>mətn</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test;
  content: "№" counter(test) ".";
}

Результат:

Nümunə

Nömrələməni 10-dan başladaq. Bunun üçün sayğacın başlanğıc dəyərini doqquz edək, yəni bizə lazım olandan 1 az:

html<div id="parent">
  <p>mətn</p>
  <p>mətn</p>
  <p>mətn</p>
  <p>mətn</p>
  <p>mətn</p>
</div>

css#parent {
  counter-reset: test 9;
}
#parent p::before {
  counter-increment: test;
  content: "№" counter(test) ".";
}

Результат:

Nümunə

Tutaq ki, indi nömrələmə "2" addımı ilə olacaq. Bunun üçün addım kimi ikini qoyuruq:

html<div id="parent">
  <p>mətn</p>
  <p>mətn</p>
  <p>mətn</p>
  <p>mətn</p>
  <p>mətn</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test 2; /* ikini qoyduq */
  content: "№" counter(test) ".";
}

Результат:

Nümunə

Əvvəlki nümunədə nömrələmə ikidən başladı, amma biz birdən başlamaq istərdik. Niyə belə oldu? Çünki counter-reset sayğacın dəyərini sıfırlayır, sonra isə counter-increment öz addımını əlavə edir: standart olaraq bir, buna görə də əvvəllər bizim nömrələmə 1-dən başlayırdı. İndi isə iki əlavə olunur - və nömrələmə ikidən başlayır.

Problemi həll etmək üçün başlanğıc dəyəri -1 edək və indi nömrələmə 1-dən başlayacaq və 2 artacaq:

html<div id="parent">
  <p>mətn</p>
  <p>mətn</p>
  <p>mətn</p>
  <p>mətn</p>
  <p>mətn</p>
</div>

css#parent {
  counter-reset: test -1;
}
p::before {
  counter-increment: test 2;
  content: "№" counter(test) ".";
}

Результат:

Həmçinin bax