Html <ol> 带有数字的另一种颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/488830/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
<ol> with numbers another color
提问by kdgregory
<ol>
<li>test</li>
<li>test</li>
</ol>
will show as:
将显示为：
- test
- test
- 测试
- 测试
I want to have numbers coloured and text black!
我想要数字着色和文本黑色！
I can edit the css, but I do not have access to the HTML.
我可以编辑 css，但我无权访问 HTML。
回答by kdgregory
The CSS specgives an example of doing just this. Unfortunately, while it works on Firefox 3, it doesn't appear to work on IE7:
在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>
回答by Pim Jager
Not sure if this works but i think it should:
不确定这是否有效，但我认为它应该：
<li style='color: red;'><span style='color:black;'>test</span></li>
edit
If you cannot edit the html then I'm afraid it's not possible. If you could add javascript to the HTML (once in the head) then you could do it like this:
编辑
如果你不能编辑 html 那么恐怕这是不可能的。如果您可以将 javascript 添加到 HTML（一次在头部），那么您可以这样做：
$(document).ready( function() {
$('ol li').wrapInner('<span class="black"> </span>').addClass('red');
});
You will need the jQuery library for this.
Then in your CSS just set up a red and a black class with color:red/black declarations.
为此，您将需要 jQuery 库。
然后在你的 CSS 中设置一个带有 color:red/black 声明的红色和一个黑色类。
回答by Peter Lairo
Here's a solution that also wraps the text for each list item left-aligned below the first line (and not below the list number):
这是一个解决方案，它也将每个列表项的文本包装在第一行下方（而不是列表编号下方）左对齐：
HTML
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
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;
}
回答by Adam Davis
This should do what you're looking for:
这应该做你正在寻找的：
http://archivist.incutio.com/viewlist/css-discuss/67894
http://archivist.incutio.com/viewlist/css-discuss/67894
HTML
HTML
<ol>
<li>1 some text here</li>
<li>2 some more text that can span longer than one line</li>
</ol>
CSS
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; }
Except you'll want to change the color and background according to your design.
除非您想根据您的设计更改颜色和背景。
This next one is overkill, but gives you a great deal of information on how to style lists:
下一个是矫枉过正，但为您提供了大量有关如何设置列表样式的信息：
http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/
http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/
-Adam
-亚当
回答by Kimball
@kdgregory 's code worked for me, but it affected my bulleted lists. I changed lito ol lito prevent the bullet items from being affected. Like so:
@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. I also prefer to use uppercase in CSS for elements like BODYso I can easily distinguish it from classes .bodyand ids #body.
PS 我也更喜欢在 CSS 中对元素使用大写，BODY这样我就可以很容易地将它与 classes.body和 ids区分开来#body。
回答by notruthless
From an answer to a similar questionI found elsewhere:
从我在别处找到的类似问题的答案：
Just as a side note, CSS3 will allow easy styling of list markers with the ::marker pseudo-element.
顺便提一下，CSS3 将允许使用 ::marker 伪元素轻松设置列表标记的样式。
But for now it looks like you'd have to add the <span>to your html.
但是现在看来您必须将<span>加到您的 html 中。
回答by joe
html:
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:
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;}
回答by cdeszaq
To expand a bit on what others said, as well as additional question clarifications, there is no built-in way of doing this from CSS w/o touching the HTML. If you are looking to keep the HTML as clean and semantic as possible, I would do the styling using javascript, probably with a library like jQuery, to adjust the DOM so that the css can be more effective.
为了扩展一些其他人所说的内容以及其他问题的澄清，CSS 没有内置的方法可以在不接触 HTML 的情况下执行此操作。如果您希望尽可能保持 HTML 的简洁和语义，我会使用 javascript（可能使用 jQuery 之类的库）进行样式设置，以调整 DOM，以便 css 更有效。
I would caution, however, using color to convey info. I'm not sure what the purpose of the colored numbers is, but using color to display information leaves colorblind users out of the loop and is a big no no for accessibility.
但是，我会谨慎使用颜色来传达信息。我不确定彩色数字的目的是什么，但是使用颜色来显示信息会使色盲用户无法参与，并且对于可访问性来说是一个很大的禁忌。
回答by y34h
too bad you can't edit the html... how about js?
太糟糕了，你不能编辑 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>
if not, maybe a good-enough solution would be
如果没有，也许一个足够好的解决方案是
ol {background-color: #DDD;}
li {background-color: white;}
回答by caiocpricci2
It's a bit late for this but I want to share it with the community, took me a long while to do this. I found a solution to change the OL numbers background and color that works on every browser. Requires an extra tag inside the li.
这有点晚了，但我想与社区分享，我花了很长时间才做到这一点。我找到了一个解决方案来更改适用于每个浏览器的 OL 数字背景和颜色。需要在li.
