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

попробуйте получить доступ к xhr.responseXML вместо responseText. Он должен дать вам документ, по которому вы можете выполнять запросы.

Если это не сработает, вместо создания узла DOM вы можете использовать DOM Parser для анализа ответа, например:

const parser = new DOMParser()
const parsedDoc = parser.parseFromString(xhr.responseText, 'text/html')

// now you can use the parsedDoc like a regular document
var translations = parsedDoc.getElementsByClassName("...")

55
задан Gilles 'SO- stop being evil' 1 June 2012 в 16:59
поделиться

6 ответов

спецификация 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>
109
ответ дан feelinferrety 26 November 2019 в 17:41
поделиться

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

<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 26 November 2019 в 17:41
поделиться

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

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

7
ответ дан Adam Davis 26 November 2019 в 17:41
поделиться

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

Так же, как примечание стороны, CSS3 позволит легкое моделирование маркеров списка с:: псевдоэлемент маркера.

, Но на данный момент похоже, что необходимо было бы добавить <span> к HTML.

1
ответ дан notruthless 26 November 2019 в 17:41
поделиться

Для расширения немного на том, что другие сказали, а также дополнительные разъяснения вопроса нет никакого встроенного способа сделать это из CSS w/o касание HTML. Если бы Вы надеетесь сохранять HTML максимально чистым и семантическим, я сделал бы моделирование с помощью JavaScript, вероятно, с библиотекой как jQuery, для корректировки DOM так, чтобы CSS могла быть более эффективной.

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

0
ответ дан cdeszaq 26 November 2019 в 17:41
поделиться

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

ol {color:red;}
ol li {color:black;}
-3
ответ дан D. Starr 26 November 2019 в 17:41
поделиться