Хусусияти counter-increment

Хусусияти counter-increment нумаракунии худкори унсурҳоро, масалан, абзасҳо ё сарлавҳаҳоро таъин мекунад. Ҳамроҳ бо хусусияти counter-reset, судуэлементҳои after ва before, хусусияти content корбаст мешавад, ки дар он функсияи counter истифода мешавад. Барои фаҳмиши беҳтар тавсия медиҳам, ки намунаҳоро бубинед.

Синтаксис

cssинтихобкунанда {
  counter-increment: ном [қадам] | none;
}

Қимматҳо

Қиммати пешфарз: none.

Намуна

Биёед то абзасҳо худкор нумара шаванд:

html<div id="parent">
  <p>матн</p>
  <p>матн</p>
  <p>матн</p>
  <p>матн</p>
  <p>матн</p>
</div>

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

Результат:

Намуна

Бигзор ғайр аз нумаракунӣ ягон матни дигар низ илова шавад. Дар мисоли мо № пеш аз рақам ва нуқта баъд аз он:

html<div id="parent">
  <p>матн</p>
  <p>матн</p>
  <p>матн</p>
  <p>матн</p>
  <p>матн</p>
</div>

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

Результат:

Намуна

Нумаракуниро аз 10 оғоз кунем. Барои ин қиммати ибтидоии счётчик нӯҳ мегузорем, яъне ба 1 камтар аз он чи ки мо лозим дорем:

html<div id="parent">
  <p>матн</p>
  <p>матн</p>
  <p>матн</p>
  <p>матн</p>
  <p>матн</p>
</div>

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

Результат:

Намуна

Бигзор нумаракунӣ бо қадами "2" бошад. Барои ин ҳамчун қадам дутарро мегузорем:

html<div id="parent">
  <p>матн</p>
  <p>матн</p>
  <p>матн</p>
  <p>матн</p>
  <p>матн</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test 2; /* дутарро мегузорем */
  content: "№" counter(test) ".";
}

Результат:

Намуна

Дар мисоли гузашта нумаракунӣ аз дутар оғоз шуд, вале мо мехостем аз якум. Чаро ин рӯй дод? Зеро counter-reset қимматҳои счётчикро ба сифр бармегардонад, ва сипас counter-increment қадами худро меафзояд: пешфарз якум, аз ин рӯ пештар нумаракунии мо аз 1 оғоз мешуд. Ва акнун дутар афзоиш меёбад - ва нумаракунӣ аз дутар оғоз мешавад.

Барои ислоҳи мушкилот қиммати ибтидоии счётчикро ба -1 мегузорем ва акнун нумаракунӣ аз 1 оғоз мешавад ва бо 2 зиёд мешавад:

html<div id="parent">
  <p>матн</p>
  <p>матн</p>
  <p>матн</p>
  <p>матн</p>
  <p>матн</p>
</div>

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

Результат:

Ҳамчунин нигаред