Заменить упорядоченный номер списка на префиксное значение, используя CSS и HTML - PullRequest
Новая
       2

Заменить упорядоченный номер списка на префиксное значение, используя CSS и HTML

2 голосов
/ 15 сентября 2011

Я пытаюсь создать таблицу стилей для поддержки отображения юридического документа со статьями, разделами, подразделами и т. Д. Я бы хотел, чтобы во внешнем упорядоченном списке вместо значения «1» отображалось «Article n:» 1. " Точно так же я хотел бы, чтобы второй уровень отображал «Раздел n -». Все остальные подчиненные уровни должны отображать значение типа стиля OL, как определено.

Я нашел похожий вопрос здесь Как я могу добавить префикс номера упорядоченного списка к статической строке, используя CSS? . Хотя ответ был принят, но человек, задающий вопрос, не смог заставить его работать. Я использую Firefox 3.6.22.

Код: 

<head>
<style type="text/css">
ol {
   counter-reset: item;
   list-style-type: decimal;
}
ol li:before {
   content: 'Article ' counter(item, decimal) ': ';
   counter-increment: item;
}
</style>
</head>

<body>
<ol>
<li>Apples</li>
<li>Oranges</li>
</ol>
</body>

Желаемый результат и тот, который подразумевает вышеуказанный вопрос: Статья 1: яблоки Статья 2: Апельсины

Вместо этого я вижу:
1. Статья 1: Яблоки
2. Статья 2: Апельсины

Если я смогу заставить эту базовую часть работать, то я могу расширить решение, включив в нее вложенные уровни, используя различные селекторы (то есть ол и ли ол). Но все это основано на удалении ведущего упорядоченного значения списка.

Что мне не хватает?

1 Ответ

5 голосов
/ 15 сентября 2011

просто нужно отключить нумерацию по умолчанию (и повторно применить пользовательскую нумерацию, как вы уже делаете): 

ol {
   counter-reset: item;
   list-style-type: none;
}

взгляните на этот пример .

...