Нумерация списка стилей разделов отчета в CSS?

Question

Теперь я знаю о «нормальных» стилях списков CSS (латинский, латинский и т. Д.) И, конечно, в прошлые годы они были несколько негибкими, не позволяя что-то вроде:

(а)

или

а)

только

а.

Теперь я считаю, что вы можете получить эффект, подобный описанному выше, с помощью псевдоэлементов: before и: after. Это верно? И какова совместимость браузера, если вы можете?

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

1. Введение 1.1 Цели 1.2 Допущения 1.3 Ограничения 1.3.1 ...
2. Новый раздел ...

и т. Д.

Может ли CSS сделать это и, если да, какова совместимость браузера?

Answer 1

См. Созданный контент, автоматическая нумерация и списки .

Этот пример показывает способ нумерации главы и разделы с "главой 1 "," 1,1 "," 1,2 "и т. Д.

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 предварительно. Так что да, совершенно бесполезно.

Answer 2

Вот спецификация W3C для автоматической нумерации и приращения CSS2 с примером нумерации типов 1.1, 1.2, 1.3.

http://www.w3.org/TR/CSS2/generate.html#counters

Я не могу помочь вам с вопросом поддержки.

Answer 3

Вот моя полная версия чистого 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) " ";
}

Answer 4

Простой пример разметки:

<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