powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Можно ли сделать автоматическую многоуровневую нумерацию?
8 сообщений из 8, страница 1 из 1
Можно ли сделать автоматическую многоуровневую нумерацию?
    #38680080
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Имеется ввиду, чтобы вложенные ol нумеровались полностью:
Код: plaintext
1.
2.
3.
4.
5.
Обычный вложенный OL:        Нужно:
1. Текст                     1. Текст
  1. Текст                     1.1. Текст
  2. Текст                     1.2. Текст
2. Текст                     2. Текст
________________________
Мы смотрим с оптимизмом...
...в оптический прицел.
...
Рейтинг: 0 / 0
Можно ли сделать автоматическую многоуровневую нумерацию?
    #38680126
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Про counter-increment я знаю.
Тут сложность в другом.

Есть документ, состоящий из множества разделов и пунктов.
Разделы бывают на уровнях с 1 по 3. Пункты бывают на уровнях с 2 по 7.
Выглядеть документ может примерно так:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
<h1>1. Раздел</h1>
<ol>
  <li>1.1. Пункт</li>
  <li>1.2. Пункт</li>
  <ol>
    <li>1.2.1. Пункт</li>
    <li>1.2.2. Пункт</li>
    <li>1.2.3. Пункт</li>
  </ol>
  <li>1.3. Пункт</li>
</ol>

<h1>2. Раздел</h1>
<h2>2.1. Раздел</h2>
<ol>
  <li>2.1.1. Пункт</li>
  <li>2.1.2. Пункт</li>
</ol>
<h2>2.2. Раздел</h2>
<ol>
  <li>2.2.1. Пункт</li>
  <ol>
    <li>2.2.1.1. Пункт</li>
    <li>2.2.1.2. Пункт</li>
    <li>2.2.1.3. Пункт</li>
  </ol>
  <li>2.2.2. Пункт</li>
</ol>



С нумерацией разделов (заголовков) сложности не возникает, я просто определяю три счетчика h1, h2, h3, и когда встречается раздел, сбрасываю счетчики уровнем ниже.
Сложность с нумерацией пунктов, так как глубина вложенности разделов может быть разной, например в приведенном выше примере у первого раздела глубина 1, у второго раздела глубина 2. Соответственно нужно каким-то образом знать, на каком уровне вложенности разделов находится конкретный пункт.
...
Рейтинг: 0 / 0
Можно ли сделать автоматическую многоуровневую нумерацию?
    #38680142
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alibek B.,

не совсем понятно...
Исходный документ так выглядит?
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
<h1>1. Раздел</h1>
<ol>
  <li>Пункт</li>
  <li>Пункт</li>
  <ol>
    <li>Пункт</li>
    <li>Пункт</li>
    <li>Пункт</li>
  </ol>
  <li>Пункт</li>
</ol>

<h1>2. Раздел</h1>
<h2>2.1. Раздел</h2>
<ol>
  <li>Пункт</li>
  <li>Пункт</li>
</ol>
<h2>Раздел</h2>
<ol>
  <li>Пункт</li>
  <ol>
    <li>Пункт</li>
    <li>Пункт</li>
    <li>Пункт</li>
  </ol>
  <li>Пункт</li>
</ol>

...
Рейтинг: 0 / 0
Можно ли сделать автоматическую многоуровневую нумерацию?
    #38680214
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Структура исходного документа выглядит так.
А вот цифры в нем указаны вручную, а я бы хотел, чтобы нумерация была автоматическая.
Сделал такой стиль:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
.section {counter-reset: p1 p2 p3 p4 p5 p6 p7;}
.section ol {counter-reset: p2 p3 p4 p5 p6 p7;}
.section ol ol {counter-reset: p3 p4 p5 p6 p7;}
.section ol ol ol {counter-reset: p4 p5 p6 p7;}
.section ol ol ol ol {counter-reset: p5 p6 p7;}
.section ol ol ol ol ol {counter-reset: p6 p7;}
.section ol ol ol ol ol ol {counter-reset: p7;}
.section li:before {font-weight: bold; font-size: 75%;}
.section ol>li:before {counter-increment: p1; content: counter(p1) ". ";}
.section ol ol>li:before {counter-increment: p2; content: counter(p1) "." counter(p2) ". ";}
.section ol ol ol>li:before {counter-increment: p3; content: counter(p1) "." counter(p2) "." counter(p3) ". ";}
.section ol ol ol ol>li:before {counter-increment: p4; content: counter(p1) "." counter(p2) "." counter(p3) "." counter(p4) ". ";}
.section ol ol ol ol ol>li:before {counter-increment: p5; content: counter(p1) "." counter(p2) "." counter(p3) "." counter(p4) "." counter(p5) ". ";}
.section ol ol ol ol ol ol>li:before {counter-increment: p6; content: counter(p1) "." counter(p2) "." counter(p3) "." counter(p4) "." counter(p5) "." counter(p6) ". ";}
.section ol ol ol ol ol ol ol>li:before {counter-increment: p7; content: counter(p1) "." counter(p2) "." counter(p3) "." counter(p4) "." counter(p5) "." counter(p6) "." counter(p7) ". ";}


С допущением нумерации пунктов каждого раздела с начала эти стили вопрос нумерации решают, страница выглядит как на прикрепленном рисунке. Но есть два "но":
1. Как видно из скриншота, "моя" нумерация выводится не висячим отступом, а непосредственно в тексте пункта. А я бы хотел, чтобы она была такой же, как в обычном OL (т.е. висячим отсупом).
2. Несмотря на доктайп HTML5 и браузер IE11, в IE11 почему-то не выводятся псевдоэлементы :before. Хотя вроде бы должны. Что не так?
...
Рейтинг: 0 / 0
Можно ли сделать автоматическую многоуровневую нумерацию?
    #38680241
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alibek B.,

а JavaScript можно использовать?
...
Рейтинг: 0 / 0
Можно ли сделать автоматическую многоуровневую нумерацию?
    #38680339
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Нет, чистый HTML. Если не получится, номера буду вручную проставлять.
...
Рейтинг: 0 / 0
Можно ли сделать автоматическую многоуровневую нумерацию?
    #38680584
Gustly
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alibek B.,

11-й ИЕ очень странный. Попробуйте его в режим 10/9-ки перевести.
...
Рейтинг: 0 / 0
Можно ли сделать автоматическую многоуровневую нумерацию?
    #38680629
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alibek B.С допущением нумерации пунктов каждого раздела с начала эти стили вопрос нумерации решают, страница выглядит как на прикрепленном рисунке.
Все же нет.
Нумерация вложенных списков почему-то не сбрасывается.
То есть если в приведенный на скриншоте пример добавить пункт 9 с подпунктами, то у подпунктов нумерация продолжиться (9.10, 9.11 и т.п.).
Видимо потому что для указанного мной селектора вложенные элементы соответствуют также и селекторам более высокого уровня.
Можно конечно для списков задавать классы, определяющие к какому уровню данный список относится, но это лишает всю идею смысла (идея была в том, чтобы нумерация была полностью автоматической и пункты и разделы можно было свободно тасовать в документе).

Вообщем я пока не вижу способа, как это сделать.
Так что обойдусь пока без наследования нумерации, буду использовать обычные вложенные списки.
...
Рейтинг: 0 / 0
8 сообщений из 8, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Можно ли сделать автоматическую многоуровневую нумерацию?
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]