<ol> с номерами другого цвета - PullRequest
Новая
       34

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

53 голосов
/ 28 января 2009 
<ol>
   <li>test</li>
   <li>test</li>
</ol>

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

  1. тест
  2. тест

Я хочу, чтобы цифры были цветными, а текст чёрным!

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

Ответы [ 11 ]

107 голосов
/ 28 января 2009

Спецификация 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>
24 голосов
/ 28 января 2009

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

<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 просто установите красный и черный класс с объявлениями color: red / black.

14 голосов
/ 10 октября 2014

Вот решение, которое также переносит текст для каждого элемента списка по левому краю под первой строкой (а не под номером списка):

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;
}
7 голосов
/ 28 января 2009

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

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

3 голосов
/ 07 мая 2015
Код

@ 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 и идентификаторов #body.

1 голос
/ 28 января 2009

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

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

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

0 голосов
/ 15 ноября 2012

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;}
0 голосов
/ 01 ноября 2012

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

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

0 голосов
/ 08 октября 2010

Жаль, что вы не можете редактировать 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;}
0 голосов
/ 28 января 2009

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

ol {color:red;}
ol li {color:black;}
Страница:
...