Question

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

将显示为：

测试
测试

我希望彩色数字和文字黑色！

我可以编辑css，但我无法访问HTML。

Answer 1

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>

Answer 2

不确定这是否有效，但我认为应该：

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

修改的
如果你不能编辑html那么我担心这是不可能的。如果你可以在HTML中添加javascript（一次在头部），那么你可以这样做：

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

你需要jQuery库。
然后在你的CSS中设置一个红色和黑色的类，颜色为：红色/黑色声明。

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

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

- 亚当

Answer 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区分开来。

Answer 6

从我在其他地方找到的similar question答案：

正如侧面说明的那样，CSS3将允许使用简单的样式列表标记 :: marker伪元素。

但是现在看起来你必须将<span>添加到你的HTML中。

Answer 7

为了扩展其他人所说的内容，以及其他问题的澄清，没有内置的方法可以通过CSS来触摸HTML。如果您希望尽可能保持HTML的清晰和语义，我会使用javascript（可能使用像jQuery这样的库）来调整DOM，以便调整DOM以使css更有效。

但是，我会提醒，使用颜色来传达信息。我不确定彩色数字的用途是什么，但使用颜色显示信息会使彩色盲用户离开循环，对于可访问性来说是一个很大的禁忌。

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

Answer 9

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

Answer 10

这有点晚了，但我想与社区分享，花了我很长时间才做到这一点。我找到了一个解决方案，可以更改适用于每个浏览器的OL数字背景和颜色。需要li内的额外标记。

See it here

Answer 11

在CSS中更改您的颜色{color：yourcolor} 在html中，用一个类在li中插入一个span并给它另一个颜色。它适用于任何列表样式，而不是列表样式。

Answer 12

这很简单，只要您不想为不同的列表项目编号指定不同的颜色即可。无需修改HTML。可能不适用于100％的浏览器..

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

<ol>用数字另一种颜色</ol>

12 个答案: