counter-increment xususiyati

counter-increment xususiyati elementlarni, masalan, abzatslar yoki sarlavhalarni avtomatik raqamlashni belgilaydi. counter-reset xususiyati bilan birgalikda ishlatiladi, after va before psevdoelementlari, content xususiyati bilan birgalikda ishlatiladi, unda counter funksiyasi qo'llaniladi. Yaxshiroq tushunish uchun misollarni ko'rib chiqishni tavsiya qilaman.

Sintaksis

cssselector {
  counter-increment: nom [qadam] | none;
}

Qiymatlar

Standart qiymat: none.

Misol

Abzatslar avtomatik raqamlanishi uchun:

html<div id="parent">
  <p>matn</p>
  <p>matn</p>
  <p>matn</p>
  <p>matn</p>
  <p>matn</p>
</div>

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

Результат:

Misol

Raqamlash bilan birga qo'shimcha matn qo'shilsin. Bizning holatda raqam oldidan № va keyin nuqta:

html<div id="parent">
  <p>matn</p>
  <p>matn</p>
  <p>matn</p>
  <p>matn</p>
  <p>matn</p>
</div>

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

Результат:

Misol

Raqamlash 10 dan boshlansin. Buning uchun hisoblagichning boshlang'ich qiymatini to'qqizga o'rnatamiz, ya'ni bizga kerakligidan 1 ga kamroq:

html<div id="parent">
  <p>matn</p>
  <p>matn</p>
  <p>matn</p>
  <p>matn</p>
  <p>matn</p>
</div>

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

Результат:

Misol

Endi raqamlash "2" qadamida bo'lsin. Buning uchun qadam sifatida ikkini o'rnatamiz:

html<div id="parent">
  <p>matn</p>
  <p>matn</p>
  <p>matn</p>
  <p>matn</p>
  <p>matn</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test 2; /* ikkini o'rnatamiz */
  content: "№" counter(test) ".";
}

Результат:

Misol

Oldingi misolda raqamlash ikkidan boshlandi, lekin biz birlikdan boshlashni xohladik. Nima sababdan shunday bo'ldi? Chunki counter-reset hisoblagich qiymatini nolga o'rnatadi, so'ngra counter-increment o'z qadamini qo'shadi: standart bo'yicha birlik, shuning uchun avval bizda raqamlash 1 dan boshlangan. Endi esa ikkita qo'shiladi - va raqamlash ikki dan boshlanadi.

Muammoni hal qilish uchun boshlang'ich hisoblagich qiymatini -1 ga o'rnatamiz va endi raqamlash 1 dan boshlanadi va 2 ga oshadi:

html<div id="parent">
  <p>matn</p>
  <p>matn</p>
  <p>matn</p>
  <p>matn</p>
  <p>matn</p>
</div>

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

Результат:

Shuningdek qarang