55 html css colors html-lists
<ol>
<li>test</li>
<li>test</li>
</ol>
将显示为:
我希望彩色数字和文字黑色!
我可以编辑css,但我无法访问HTML.
kdg*_*ory 109
在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>
Pim*_*ger 24
不确定这是否有效,但我认为它应该:
<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中设置一个红色和黑色的颜色类:红色/黑色声明.
小智 15
这是一个解决方案,它还包含第一行下方(而不是列表编号下方)左对齐的每个列表项的文本:
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; }
除非您想根据您的设计更改颜色和背景.
下一个是过度杀伤,但为您提供了有关如何设置列表样式的大量信息:
http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/
-亚当
::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