数字另一种颜色
<ol> <li>test</li> <li>test</li> </ol> 将显示为：
- testing
- testing
我想要有数字颜色和文字黑色！
我可以编辑CSS，但我没有访问HTML。
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>
不知道这是否工作，但我认为它应该：
<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设置一个红色和黑色的类与颜色：红色/黑色的声明。
下面是一个解决scheme，它也为每个列表项在第一行下方左alignment（而不是在列表号之下）。
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; }
这应该做你正在寻找的东西：
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; }
除了你想要根据你的devise改变颜色和背景。
接下来的一个是矫枉过正的，但是给你提供了大量关于如何样式表的信息：
http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/
-亚当
@kdgregory的代码为我工作，但它影响了我的项目符号列表。 我把li改为了ol li ，以防子弹项目受到影响。 像这样：
ol { counter-reset: item } ol li { display: block } ol li:before { content: counter(item) ". "; counter-increment: item; color: red; }
PS我也喜欢在CSS中使用大写字母作为BODY元素，所以我可以很容易地将它与类.body和id #body区分开来。
从我在其他地方发现的一个类似问题的答案，
正如旁注所示，CSS3将允许使用:: marker伪元素轻松地定义列表标记的样式。
但现在看起来你不得不将<span>添加到你的html。
为了扩大一些别人所说的话，以及额外的问题澄清，没有内置的方式来从CSS不接触HTML。 如果您希望保持HTML的清洁和语义尽可能，我会做的样式使用JavaScript，可能与像jQuery库，调整DOM，使CSS可以更有效。
但是，我会警告，使用颜色来传达信息。 我不确定彩色数字的用途是什么，但是使用颜色来显示信息会使用户退出循环，对于可访问性来说，这是一个很大的问题。
太糟糕了，你不能编辑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>
如果没有，也许是一个足够好的解决scheme
ol {background-color: #DDD;} li {background-color: white;}
这有点晚了，但我想与社区分享，花了很长时间才能做到这一点。 我find了一个解决scheme，以改变每个浏览器的OL数字背景和颜色。 在里面需要额外的标签。
在这里看到
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：0像素; 保证金左：5px的;}
ol li {color：＃666;}
ol li：首字母{color：＃69A8DE; 填充右：5像素; 保证金左：-15px;}
这很简单，只要你不想分配不同的颜色到不同的列表项目号码。 没有必要的HTML修改。 可能无法在100％的浏览器中工作..
ol {color:red;} ol li {color:black;}
