<ol> с цифрами другого цвета

<ol>
   <li>test</li>
   <li>test</li>
</ol>

будет отображаться как:

тест
тест

Я хочу иметь цветные цифры и текст черный!

Я могу редактировать css, но у меня нет доступа к HTML.

Ответ 1

спецификация CSS дает пример этого. К сожалению, пока он работает на Firefox 3, он не работает на IE7:

<html>
<head>
    <style>
        ol { counter-reset: item; }
        ol li { display: block; }
        ol li:before {
            content: counter(item) ". ";
            counter-increment: item;
            color: red;
        }
    </style>
</head>
<body>
    <ol>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ol>
</body>
</html>

Ответ 2

Не уверен, что это работает, но я думаю, что он должен:

<li style='color: red;'><span style='color:black;'>test</span></li>

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

$(document).ready( function() {
 $('ol li').wrapInner('<span class="black"> </span>').addClass('red');
});

Для этого вам понадобится библиотека jQuery.
Затем в вашем CSS просто установите красный и черный класс с красными/черными объявлениями.

Ответ 3

Здесь есть решение, которое также обертывает текст для каждого элемента списка, выровненного слева ниже первой строки (а не ниже номера списка):

HTML

<ol class="GreenNumbers">
   <li>Long text that might wrap onto a second line.</li>
   <li>Long text that might wrap onto a second line.</li>
   <li>Long text that might wrap onto a second line.</li>
</ol>

CSS

.GreenNumbers {
    list-style-type: none;
}
.GreenNumbers ol {
    margin-left: 2em;
}
.GreenNumbers li {
    counter-increment: count-me;
}
.GreenNumbers li::before {
    content: counter(count-me) ". ";
    display: block;
    position: relative;
    max-width: 0px;
    max-height: 0px;
    left: -1.3em;
    top: .05em;
    color: #008000;
    font-weight: bold;
}

Ответ 4

Это должно делать то, что вы ищете:

http://archivist.incutio.com/viewlist/css-discuss/67894

HTML

<ol>
    <li>1 some text here</li>
    <li>2 some more text that can span longer than one line</li>
</ol>

CSS

ol { list-style: none; padding-left: 2em; text-indent: -1em;}

li:first-letter { float: left; 
                  font-size: ??; 
                  color: white; 
                  background: orange; 
                  line-height: 1.0; }

Кроме того, вы хотите изменить цвет и фон в соответствии с вашим дизайном.

Этот следующий является излишним, но дает вам много информации о том, как создавать списки стилей:

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

-Adam

Ответ 5

Код @kdgregory работал у меня, но это повлияло на мои маркированные списки. Я изменил li на ol li, чтобы предотвратить повреждение элементов маркера. Например:

ol { counter-reset: item }
ol li { display: block }
ol li:before { content: counter(item) ". "; counter-increment: item; color: red; }

P.S. Я также предпочитаю использовать прописные буквы в CSS для таких элементов, как BODY, поэтому я могу легко отличить его от классов .body и ids #body.

Ответ 6

Из ответа на аналогичный вопрос я нашел в другом месте:

Как примечание, CSS3 позволит легко стилизовать маркеры списка с помощью:: Псевдоэлемент маркера.

Но на данный момент похоже, что вам нужно добавить <span> в свой html.

Ответ 7

Чтобы немного рассказать о том, что говорили другие, а также дополнительные разъяснения вопросов, нет встроенного способа сделать это из CSS без касания HTML. Если вы хотите, чтобы HTML был как можно более чистым и семантическим, я бы сделал стиль, используя javascript, возможно, с помощью библиотеки jQuery, чтобы настроить DOM, чтобы css мог быть более эффективным.

Я бы предупредил, однако, использовать цвет для передачи информации. Я не уверен, какова цель цветных чисел, но использование цвета для отображения информации оставляет слепящих пользователей вне цикла и является большим, нет для доступности.

Ответ 8

слишком плохо, что вы не можете редактировать html... как насчет js?

<script>
var x = document.getElementsByTagName('li');
for (i=0; i<x.length; i++) { x[i].innerHTML ="<span>" + x[i].innerHTML + "</span>" }

// or with jQuery
$('.li').each(function(){this.innerHTML="<span>" + this.innerHTML + "</span>" })
</script>

<style>
li {color: #DDD;}
li span {color: black;}
</style>

если нет, возможно, достаточно хорошее решение будет

ol {background-color: #DDD;}
li {background-color: white;}

Ответ 9

Это немного поздно для этого, но я хочу поделиться им с сообществом, потребовалось много времени, чтобы сделать это. Я нашел решение для изменения фона и цвета номеров OL, которые работают в каждом браузере. Требуется дополнительный тег внутри li.

Смотрите здесь

Ответ 10

HTML

    <ol>
    <li>1 A long bullet here it is long to show how it behaves on a second line</li>
    <li>2 A long bullet here it is long to show how it behaves on a second line</li>
    <li>3 A long bullet here it is long to show how it behaves on a second line</li>
    <li>4 A long bullet here it is long to show how it behaves on a second line</li>
    <li>5 A long bullet here it is long to show how it behaves on a second line</li>
    </ol>

CSS

ol { list-style: none; padding-left: 10px; text-indent:0px; margin-left:5px;}

ol li {color:#666;}

ol li:first-letter {color:#69A8DE; padding-right:5px; margin-left:-15px;}

Ответ 11

Это легко, если вы не хотите назначать разные цвета для разных номеров элементов списка. Никаких изменений HTML не требуется. Возможно, не работает в 100% браузеров, хотя..

ol {color:red;}
ol li {color:black;}