300 of 313 menu

Свойство counter-increment

Свойството counter-increment задава автоматично номериране на елементи, например, параграфи или заглавия. Използва се съвместно ъс свойството counter-reset, псевдоелементите after и before, свойството content, вътре в което се използва функцията counter. За по-добро разбиране препоръчвам да разгледате примерите.

Синтаксис

селектор { counter-increment: название [шаг] | none; }

Стойности

Стойност Описание
название Име на брояч. Обикновена дума (като име на клас или id). Може да задавате няколко имена, разделяйки ги с интервал. В този случай едновременно ще се променят няколко брояча.
шаг Цяло положително или отрицателно число. Незадължителен параметър.
none Забранява увеличението на брояча за текущия селектор.

Стойност по подразбиране: none.

Пример

Нека направим така, че параграфите да се номерират автоматично:

<div id="parent"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div> #parent { counter-reset: test; } #parent p::before { counter-increment: test; content: counter(test); }

:

Пример

Нека освен номерацията да се добавя и някакъв текст. В нашия случай пред цифрата и точка след:

<div id="parent"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div> #parent { counter-reset: test; } #parent p::before { counter-increment: test; content: "№" counter(test) "."; }

:

Пример

Нека започнем номерацията от 10. За това началната стойност на брояча поставяме девет, тоест с 1 по-малко, отколкото ни трябва:

<div id="parent"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div> #parent { counter-reset: test 9; } #parent p::before { counter-increment: test; content: "№" counter(test) "."; }

:

Пример

Нека сега номерацията да е със стъпка "2". За това като стъпка поставяме двойка:

<div id="parent"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div> #parent { counter-reset: test; } #parent p::before { counter-increment: test 2; /* поставяме двойка */ content: "№" counter(test) "."; }

:

Пример

В предишния пример номерацията започна от двойка, а ние бихме искали от единица. Защо се случи така? Защото counter-reset нулира стойностите на брояча на нула, а след това counter-increment добавя своята стъпка: по подразбиране единица, затова преди това при нас номерацията започваше от 1. А сега се прибавя двойка - и номерацията започва от двойка.

За поправянето на проблема поставяме началната стойност на брояча на -1 и сега номерацията ще започне от 1 и ще се увеличава с 2:

<div id="parent"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div> #parent { counter-reset: test -1; } p::before { counter-increment: test 2; content: "№" counter(test) "."; }

:

Вижте също

  • свойство counter-reset,
    което нулира стойността на брояча на нула
Български
AfrikaansAzərbaycanবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Ние използваме бисквитки за работата на сайта, анализ и персонализация. Обработката на данни се извършва в съответствие с Политика за поверителност.
приемам всички настройки отхвърляне