Заголовки заголовков HTML/CSS?

Ответ 1

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

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

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

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

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

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

Ответ 2

Определенно возможно использование счетчиков 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 для изменения текста заголовка.

Подробности смотрите в MDN: Использование счетчиков CSS.

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

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

Ответ 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>

будет выглядеть примерно так:

• Раздел
  I. Вложенные II. Вложенные два
  
• Раздел
• Раздел
• Раздел

Ответ 4

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

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

Ответ 5

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

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

Существует также возможность использовать Unordered Lists и CSS, как показано в этом примере:

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

Ответ 6

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

Ответ 7

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