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

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

<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>... да. Это произошло, хотя я благодарю вас за предложения и время, но я искал (стандартная стандартная, что я...;)) для более... семантического варианта.

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

Ответы

Ответ 1

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

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

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

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

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

Ответ 2

В 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;
}

Ответ 3

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

<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; }

Ответ 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 в зависимости от вашей ситуации.

Ответ 5

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

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

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

Ответ 6

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

<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>

Ответ 7

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

Также обратите внимание на настройку бокового символа: 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) "."; }

Ответ 8

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