it-swarm.com.ru

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

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

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

  1. тестовое задание
  2. тестовое задание

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

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

53
depo

CSS spec дает пример того, как это сделать. К сожалению, хотя он работает в 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>
107
kdgregory

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

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

24
Pim Jager

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

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;
}
14
Peter Lairo

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

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/

-Адам

7
Adam Davis

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

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

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

3
Kimball

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

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

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

1
notruthless

жаль, что вы не можете редактировать 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
y34h

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

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

0
cdeszaq

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; отступ слева: 10 пикселей; Текст-отступы: 0px; поле слева: 5px;} 
 
 ol li {color: # 666;} 
 
 ol li: первая буква {color: # 69A8DE; обивка-направо: 5px; Запас налево: -15px;} 
 
0
joe