HTML / CSS заголовки автонумерации?

Question

Есть ли способ (в идеале легко) сделать заголовки и разделы автоматическими в HTML / CSS? Возможно, библиотека JS?

Или это что-то, что трудно сделать в HTML?

Я смотрю на приложение для корпоративной вики, но мы хотим иметь возможность использовать номера заголовков, как у нас всегда в текстовых процессорах.

Answer 1

Определенно возможно с помощью счетчиков css - просто следите за совместимостью браузера ...:

Это заставит h2 получить 1., 2., h3 получит 1.1, 2.1, 2.2 и т.д ...

<style>
   body{counter-reset: section}
   h2{counter-reset: sub-section}
   h3{counter-reset: composite}
   h4{counter-reset: detail}

   h2:before{
     counter-increment: section;
     content: counter(section) " ";
   }
   h3:before{
     counter-increment: sub-section;
     content: counter(section) "." counter(sub-section) " ";
   }
   h4:before{
     counter-increment: composite;
     content: counter(section) "." counter(sub-section) "." counter(composite) " ";
   }
   h5:before{
     counter-increment: detail;
     content: counter(section) "." counter(sub-section) "." counter(composite) "." counter(detail) " ";
   }
   </style>

Как говорит lpfavreau, это то же самое, что и другой вопрос Я верю.

Также обратите внимание, что использование css не изменит заголовок (например, выделенный текст даст вам заголовок без цифр). Это может или не может быть желательным. Ответ (принятый) lpfavreau даст вам код jquery для изменения текста заголовка.

Стороннее редактирование

Я создал пример с CSS выше

Answer 2

2016 обновление. Пожалуйста, посмотрите ответ Стивена ниже для правильного метода в CSS. Мой ответ имел смысл в 2009 году, когда браузеры и библиотеки были разными. Сейчас мы живем в совершенно новом мире, и метод, представленный здесь, устарел. Я оставляю это для бедных душ, которые все еще живут в корпоративных микрокосмах из IE7 и слез.

---

См. этот другой вопрос , если вам интересно, как это сделать в CSS, ответ может быть тем, что вы ищете. Но у titel есть и хорошее предложение, в зависимости от того, как сделан ваш HTML-документ.

Следует отметить, что, как сказал Триптих в другом комментарии, это представляет интерес только в том случае, если оно предназначено для внутреннего инструмента, в котором вы можете контролировать, какие браузеры используются, и использование CSS того стоит, поскольку изменение HTML будет затруднительным. пример. Поддержка этой функции CSS ограничена.

Конечно, было бы легко использовать что-то вроде jQuery , чтобы также делать приращение. Что-то вроде этого непроверенного фрагмента:

$(document).ready(function() {
  $('h1').each(function(index) {
    $(this).html((index + 1) + '. ' + $(this).html());
  });
});

Не забудьте, конечно, включить файл jquery.js в ваш документ.

Answer 3

Самый простой способ - нумерованные списки

<ol>
<li> Section
    <ol>
      <li>Nested one</li>
      <li>Nested two</li>
    </ol>
</li>
<li>Section</li>
<li>Section</li>
<li>Section</li>
<ol>

будет что-то вроде:

1. Раздел
   I. Вложенный
   II. Вложенные два
   
2. Раздел
3. Раздел
4. Раздел

Answer 4

<ol>
  <li>Heading 1</li>
  <li>Heading 2</li>
  <li>Heading 3</li>
</ol>

Answer 5

Списки делают это, почему не другие элементы? http://www.w3.org/TR/CSS2/generate.html#scope

Answer 6

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

http://archive.corewebprogramming.com/Chapter2/Nested-Ordered-Lists.html

Существует также возможность использовать неупорядоченные списки и CSS, как показано в этом примере:

http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/

Answer 7

Может быть сделано либо на стороне сервера, либо с помощью JavaScript. Не знаю ни о каких готовых скриптах, которые это делают.

Невозможно сделать с HTML / CSS, по крайней мере - если вы не добавите вручную все числа в свои заголовки.