Как раскрасить автоматически сгенерированные числа в стиле списка?

Question

Я использую следующий список:

<ol id="footnotes">
    <a name="footnote1"><li></a>This is the first footnote...</li>
    <a name="footnote2"><li></a>This is the second footnote...</li>
</ol>

Со следующими .css:

#footnotes {list-style-type: decimal;
            list-style-color: #f90;
            }

#footnotes li
           {color: #000;
            }

#footnotes a li,
#footnotes li a
           {color: #f90;
            }

Цель состоит в том, чтобы сам текст li / footer был черным (#000), а число - оранжевым (#f90).

Я пытался использовать свойство list-style-color, но это ничего не делает, кроме как расстроить панель инструментов веб-разработчика (в FF3.0.8 / Ubuntu 8.04), Midori аналогично не отображает число оранжевым цветом (я думал, что попробую это в движке Webkit, на всякий случай ...).

Есть идеи?

Отредактировал HTML (поскольку я вспомнил, что тег не обязательно должен содержать что-либо, чтобы функционировать как якорь):

<ol id="footnotes">
    <li><a name="footnote1"></a>This is the first footnote...</li>
    <li><a name="footnote2"></a>This is the second footnote...</li>
</ol>

В ответ на те, которые предлагают использовать <span> внутри <li> ... да. Это произошло, хотя я благодарю вас за предложения и потраченное время, но я искал (li'l standardista, что я ...;)) более ... семантический вариант.

На самом деле, я думаю, я, вероятно, воспользуюсь этим подходом. Хотя я принял другой ответ Пита Мишо из-за его информативного характера. Спасибо!

Answer 1

В CSS3 есть способ использовать модуль Генерируемый и заменяемый контент . С помощью этой техники вам не нужно добавлять дополнительную разметку в ваш HTML. Нечто подобное должно сработать:

ol li {
    list-style-type: none;
    counter-increment: list;
    position: relative;
}

ol li:after {
    content: counter(list) ".";
    position: absolute;
    left: -2.5em;
    width: 2em;
    text-align: right;
    color: red;
}

Answer 2

Это должно работать:

<ol id="footnotes">
    <li><span>This is the first footnote...</span></li>
    <li><span>This is the second footnote...</span></li>
</ol>

#footnotes li { color: #f90; }
#footnotes li span { color: #000; }

Answer 3

Что ж, главное, что цифры технически генерируются внутри <li>, поэтому все, что вы делаете с <li>, повлияет на число. Из спецификации:

"Большинство элементов уровня блока в CSS генерируют один основной блок блока. В этом разделе мы обсудим два механизма CSS, которые вызывают элемент создать два блока: один блок основного блока (для элемента содержимое) и один отдельный маркер (для украшения, такого как маркером, изображением или номером). "

Обратите внимание, что поле маркера и главное поле принадлежат тот же элемент - в данном случае элемент списка. Соответственно, мы должны ожидать, что все стили <li> будут применены как к маркеру, так и к содержимому. Это также не удивительно, если вы думаете об этом, как будто список Сам элемент генерирует контент нумерации (который эффективно делает в терминах CSS). Это подтверждается позже, когда спецификация продолжает:

"Свойства списка позволяют выполнять базовое визуальное форматирование списков. Как и в случае с более общие маркеры, элемент с «display: list-item» генерирует основной блок для содержимого элемента и дополнительный блок маркера. Другие свойства списка позволяют авторам указывать тип маркера (изображение, глиф или число) и его положение по отношению к основной ящик (вне его или внутри него перед содержимым). Они не позволяют авторам указывать различные стили (цвета, шрифты, выравнивание, и т. д.) для маркера списка или отрегулируйте его положение относительно главный ящик. "

Таким образом, поскольку маркер принадлежит списку, на него влияет стиль <li>, и он не настраивается напрямую. Единственный способ добиться другого стиля для маркера - это вставить <span> внутри элемента списка и стилизовать диапазон с теми свойствами, которые вы хотите отличать от маркера.

Answer 4

Это простое решение CSS3 работает в большинстве браузеров (IE8 и выше):

ul {
    padding-left: 14px;
    list-style: none;
}
ul li:before {
    color: #f90;
    content: "•";
    position: relative; 
    left: -7px;
    font-size: 18px;
    margin-left: -7px;
}

Возможно, вам придется настроить значения padding и margin в зависимости от вашей ситуации.

Answer 5

У меня недавно была похожая проблема, и я нашел статью Стилизация упорядоченных номеров списков , в которой описан умный способ достижения стиля для маркеров списка без использования дополнительных тегов . В статье в основном говорится, что для упорядоченного списка:

Ключ использует сгенерированный CSS контент для создания и вставки номера счетчиков после удаления нумерации по умолчанию из списка.

Подробнее см. В статье.

Answer 6

Объединяя некоторые другие ответы, которые я нахожу неполными, я нахожу это наиболее полным. Он рассматривает подстиль-типы для различных уровней в иерархии и считает, что li может быть более чем одной строкой (: после ставится в нижней строке, поэтому мы используем : * Перед 1006 *).

Также обратите внимание на настройку бокового символа: 1. 1). Проверено в Chrome.

ol { counter-reset:li; }
ol li {
    list-style-type:none;
    counter-increment:li;
    position:relative;
}
ol li:before {
    content:counter(li) ")";
    position:absolute;
    left: -2.6em;
    width: 2em;
    text-align: right;
    color: #f00;
}
ol ol li:before { content:counter(li,lower-alpha) ")"; }
ol ol ol li:before { content:counter(li,lower-roman) "."; }

Answer 7

Как насчет этого?

<head>
  <style>
    #footnotes li { color: #f90; }
    #footnotes li a { color: #000; }
  </style>
</head>
<body>
  <ol id="footnotes">
    <li><a name="footnote1">This is the first footnote...</a></li>
    <li><a name="footnote2">This is the second footnote...</a></li>
  </ol>
</body>

Answer 8

Вы также можете использовать «внешний» атрибут стиля списка. Смотрите здесь