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

将显示为：

  1. 测试
  2. 测试

我想要有颜色的数字和黑色的文字！

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

4

13 回答 13

121

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>
于 2009-01-28T19:35:11.823 回答
30

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

<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 声明的红色和黑色类。

于 2009-01-28T18:50:27.513 回答
18

这是一个解决方案，它还包装了每个列表项的文本，左对齐在第一行下方（而不是在列表编号下方）：

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;
}
于 2014-10-10T12:08:45.710 回答
17

现代方法 (2021) - ::marker 伪元素

::marker伪元素的引入使得改变有序列表中数字的颜色（和其他样式）变得更加简单。

例子：

ol li::marker {
    color: red;
}

现代浏览器已经支持使用::marker：https ://caniuse.com/css-marker-pseudo

我们正处于不再需要旧的解决方案（变通办法）的地步，大多数网站现在都可以轻松使用::marker。

请记住，并非所有属性都在标记标签上可用。有关更多详细信息，请参阅 MDN 文档：https ://developer.mozilla.org/en-US/docs/Web/CSS/::marker

于 2021-01-14T22:02:17.170 回答
7

这应该可以满足您的需求：

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/

-亚当

于 2009-01-28T18:55:49.470 回答
3

@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这样我可以很容易地将它与 classes.body和 ids区分开来#body。

于 2015-05-07T19:57:21.240 回答
2

从我在其他地方找到的类似问题的答案：

顺便说一句，CSS3 将允许使用 ::marker 伪元素轻松设置列表标记的样式。

但是现在看来您必须将 . 添加<span>到您的 html 中。

于 2009-01-28T19:20:58.420 回答
0

为了扩展其他人所说的内容以及额外的问题说明，CSS没有内置的方法可以做到这一点而无需接触HTML。如果您希望保持 HTML 尽可能干净和语义化，我会使用 javascript（可能使用 jQuery 之类的库）来调整 DOM 以使 css 更有效。

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

于 2009-01-28T19:06:38.933 回答
0

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 {列表样式：无；左边距：10px；文本缩进：0px；左边距：5px;}

ol li {颜色：#666;}

ol li:first-letter {color:#69A8DE; 填充右：5px；左边距：-15px;}
于 2012-11-15T17:38:52.440 回答
0

too bad you can't edit the html... how about 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>

if not, maybe a good-enough solution would be

ol {background-color: #DDD;}
li {background-color: white;}
于 2010-10-08T04:44:47.810 回答
0

在 CSS 中更改 ul li{ color: yourcolor} 的颜色 在 html 中，在 li 中放置一个带有类的 span 并赋予它另一种颜色。它适用于任何它不是和图像的列表样式。

于 2020-12-08T17:02:42.310 回答
-1

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

看这里

于 2012-11-01T14:07:23.980 回答
-3

这很容易，只要您不想为不同的列表项编号分配不同的颜色。无需修改 HTML。虽然可能无法在 100% 的浏览器中运行..

ol {color:red;}
ol li {color:black;}
于 2009-01-28T19:51:00.527 回答