Счетчики и область видимости

На настоящий момент мы знаем, как связывать несколько счетчиков для создания нумерации разделов и подразделов. Часто именно этого желают авторы и для вложенных нумерованных списков, но попытки создания необходимого количества счетчиков для нумерации глубоко вложенных уровней могут быстро привести к сложностям. Нумерация пятикратно вложенных списков потребовала бы вот такой связки правил:

ol ol ol ol ol li:before {counter-increment: ord1 ord2 ord3 ord4 ord5;
content: counter(ord1) "." counter(ord2) "." counter(ord3) "."
counter(ord4) "." counter(ord5) ".";}

Представьте, сколько пришлось бы написать правил для нумерации вложенных списков с 50 уровнями вложенности! (Я не говорю, что вы должны создавать такие списки. Просто представьте себе это на мгновение.) К счастью, CSS2.x описал для счетчиков концепцию области видимости (scope). Она гласит, что каждый уровень вложенности создает новую область видимости для любого заданного счетчика. Область видимости – это то, что обеспечивает возможность следующим правилам осуществлять нумерацию вложенного списка, как это обычно происходило в HTML:

ol {counter-reset: ordered;}
ol li:before {counter-increment: ordered;
content: counter(ordered) ".


";}

Все эти правила, даже будучи вложенными в другие, создадут нумерованные списки, начиная счет с 1 и обеспечивая единичное приращение для каждого последующего элемента, – в точности так, как это происходило в HTML с самого начала. Эта схема работает, потому что на каждом уровне вложенности создается новый экземпляр счетчика ordered. Итак, для первого нумерованного списка создается экземпляр ordered. Затем для каждого списка, вложенного в первый, создается новый экземпляр, и нумерация каждого списка начинается сначала. Но вам надо нумеровать списки так, чтобы каждый уровень вложенности создавал новый номер, добавляющийся к старому: 1, 1.1, 1.2, 1.2.1, 1.2.2, 1.3, 2, 2.1 и т. д. Этого нельзя добиться посредством свойства counter() (счетчик), но свойство counters() (счетчики) делает это возможным. Вот какое различие обеспечивает буква «s»!:

ol {counter-reset: ordered;}
ol li:before {counter-increment: ordered;
content: counters(ordered,".") " - ";}

По существу, ключевое слово counters(ordered,".") отображает счетчик ordered каждой области видимости, добавляя в конце точку, и выстраивает подряд все счетчики, в области видимости которых находится данный элемент.


Таким образом, элементу списка третьего уровня вложенности предшествуют значения ordered для самого внешнего списка, для списка, находящегося между внешним и текущим списками, и данного списка, каждое из которых заканчивается точкой. Затем в соответствии со значением свойства content после всех этих чисел добавляются пробел, дефис и еще один пробел. Как и в случае со свойством counter(), можно задавать стили списка для вложенных счетчиков, но один и тот же стиль будет применен ко всем счетчикам. Таким образом, если изменить предыдущую CSS так, использовали бы для нумерации вместо чисел строчные буквы:

ol li:before {counter-increment: ordered;
content: counters(ordered,".",lower-alpha) ": ";}

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Вставка генерируемого содержимого
Вставка значений атрибутов
Генерируемое содержимое
Генерируемые кавычки
Изображения для элементов списка