Нумерация списка стилей раздела отчета в CSS?
Теперь я знаю о "обычных" стилях списков CSS (латинские, латинские и т. д.), И, конечно же, в прошлые годы они были несколько негибкими, не позволяя такие вещи, как:
а)
или же
а)
Только
а.
Теперь я считаю, что вы можете получить эффект, подобный приведенному выше, с помощью псевдоэлементов: before и: after. Это верно? А какая совместимость с браузером, если можно?
Однако мой главный вопрос заключается в том, что я хочу иметь нумерацию стиля отчета:
- Вступление 1.1 Цели 1.2 Предположения 1.3 Ограничения 1.3.1 ...
- Новый раздел ...
и так далее.
Может ли CSS это сделать, и если да, то какова совместимость браузера?
Ответы 4
См. Сгенерированный контент, автоматическая нумерация и списки.
This example shows a way to number chapters and sections with "Chapter 1", "1.1", "1.2", etc.
H1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter; /* Add 1 to chapter */
counter-reset: section; /* Set section to 0 */
}
H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
Обновлено: quirksmode.org имеет лучшую таблицу поддержки css в браузерах. Почти все браузеры, кроме IE до IE8b2. Так что да, совершенно бесполезно.
почему бы не реализовать это и не использовать js для IE6 / 7? Вознаградите пользователей продвинутых веб-браузеров :)
4 года спустя это полностью пригодилось! Хотя этот конкретный код выше не работает, проверьте ответ @AmbroseChapel внизу - согласно спецификации вам нужно поместить сброс счетчика «главы» в тело для инициализации этой переменной, а сброс «раздела» должен быть в H1, а не H1: раньше. Таким образом, это работает, например, как шарм на WebKit.
По крайней мере, в Chrome кажется, что сброс главы должен быть установлен для контейнера всех H1. body { counter-reset: chapter; }
Простой пример разметки:
<ol>
<li>level one</li>
<ol start = "10">
<li>level two</li>
<li>level two</li>
<ol start = "110">
<li>level three</li>
</ol>
<li>level two
</ol>
<li>level one</li>
</ol>
Результат:
1. level one
10. level two
11. level two
110. level three
12. level two
2. level one
Поддержка браузеров довольно широка: соответствует MSIE6. Это HTML 4.0
Это не та нумерация, которую я искал. 112 - это не то же самое, что 1.1.2. Как бы вы сделали 2.11.3.12? 211312? В этом нет смысла.
Дело в том, что, поскольку поддержка браузером кажется проблемой, CSS - не ответ. Поддержка псевдоклассов в MSIE близка к нулю.
Вот спецификация W3C для автоматической нумерации и приращения CSS2 с примером нумерации типов 1.1, 1.2, 1.3.
http://www.w3.org/TR/CSS2/generate.html#counters
Я не могу помочь вам с вопросом поддержки.
Вот моя полная версия чистого решения css, которое идет до уровня h6. Протестировано с IE9 и Firefox 28.
body {
counter-reset:level1Header;
}
h1 {
counter-reset:level2Header;
}
h2 {
counter-reset:level3Header;
}
h3 {
counter-reset:level4Header;
}
h4 {
counter-reset:level5Header;
}
h5 {
counter-reset:level6Header;
}
h1:before {
counter-increment:level1Header;
content:counter(level1Header) ". ";
}
h2:before {
counter-increment:level2Header;
content:counter(level1Header) "." counter(level2Header) " ";
}
h3:before {
counter-increment:level3Header;
content:counter(level1Header) "." counter(level2Header) "." counter(level3Header) " ";
}
h4:before {
counter-increment:level4Header;
content:counter(level1Header) "." counter(level2Header) "." counter(level3Header) "." counter(level4Header) " ";
}
h5:before {
counter-increment:level5Header;
content:counter(level1Header) "." counter(level2Header) "." counter(level3Header) "." counter(level4Header) "." counter(level5Header) " ";
}
h6:before {
counter-increment:level6Header;
content:counter(level1Header) "." counter(level2Header) "." counter(level3Header) "." counter(level4Header) "." counter(level5Header) "." counter(level6Header) " ";
}
Так не IE? Что ж, тогда это совершенно бесполезно. Стыд.