更改 html 列表中项目符号的颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/76564/
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
Change the color of a bullet in a html list?
提问by Dave Haynes
All I want is to be able to change the color of a bullet in a list to a light gray. It defaults to black, and I can't figure out how to change it.
我想要的只是能够将列表中项目符号的颜色更改为浅灰色。它默认为黑色，我不知道如何更改它。
I know I could just use an image; I'd rather not do that if I can help it.
我知道我可以只使用图像；如果我能帮上忙，我宁愿不这样做。
回答by Prestaul
The bullet gets its color from the text. So if you want to have a different color bullet than text in your list you'll have to add some markup.
项目符号从文本中获取颜色。因此，如果您想要与列表中的文本颜色不同的项目符号，则必须添加一些标记。
Wrap the list text in a span:
将列表文本包裹在一个 span 中：
<ul>
<li><span>item #1</span></li>
<li><span>item #2</span></li>
<li><span>item #3</span></li>
</ul>
Then modify your style rules slightly:
然后稍微修改您的样式规则：
li {
color: red; /* bullet color */
}
li span {
color: black; /* text color */
}
回答by Marc
I managed this without adding markup, but instead using li:before. This obviously has all the limitations of :before(no old IE support), but it seems to work with IE8, Firefox and Chrome after some very limited testing. It's working in our controller environment, wondering if anyone could check this. The bullet style is also limited by what's in unicode.
我在没有添加标记的情况下进行了管理，而是使用了 li:before。这显然具有:before（没有旧的 IE 支持）的所有限制，但经过一些非常有限的测试后，它似乎适用于 IE8、Firefox 和 Chrome。它在我们的控制器环境中工作，想知道是否有人可以检查一下。子弹样式也受 unicode 内容的限制。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
li {
list-style: none;
}
li:before {
/* For a round bullet */
content:'22';
/* For a square bullet */
/*content:'A0';*/
display: block;
position: relative;
max-width: 0px;
max-height: 0px;
left: -10px;
top: -0px;
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<ul>
<li>foo</li>
<li>bar</li>
</ul>
</body>
</html>
回答by Supuhstar
This was impossible in 2008, but it's becoming possible soon (hopefully)!
这在 2008 年是不可能的，但很快就会成为可能（希望如此）！
According to The W3C CSS3 specification, you can have full control over any number, glyph, or other symbol generated before a list item with the ::markerpseudo-element.
To apply this to the most voted answer's solution:
根据W3C CSS3 规范，您可以完全控制在带有::marker伪元素的列表项之前生成的任何数字、字形或其他符号。将此应用于投票最多的答案的解决方案：
<ul>
<li>item #1</li>
<li>item #2</li>
<li>item #3</li>
</ul>
li::marker {
color: red; /* bullet color */
}
li {
color: black /* text color */
}
Note, though, that as of July 2016, this solution is only a part of the W3C Working Draft and does not work in any major browsers, yet.
但请注意，截至 2016 年 7 月，此解决方案只是 W3C 工作草案的一部分，尚不适用于任何主要浏览器。
If you want this feature, do these:
如果您需要此功能，请执行以下操作：
- Blink(Chrome, Opera, Vivaldi, Yandex, etc.): star Chromium's issue
- Gecko(Firefox, Iceweasel, etc.): Click "(vote)" on this bug
Trident(IE, Windows web views): Click "I can too" under "X User(s) can reproduce this bug"
Trident development has ceased- EdgeHTML(MS Edge, Windows web views, Windows Modern apps): Click "Vote" on this prpopsal
- Webkit(Safari, Steam, WebOS, etc.): CC yourself to this bug
回答by Jonathan Arkell
<ul>
<li style="color: #888;"><span style="color: #000">test</span></li>
</ul>
the big problem with this method is the extra markup. (the span tag)
这种方法的大问题是额外的标记。（跨度标签）
回答by ghr
Just do a bullet in a graphics program and use list-style-image:
只需在图形程序中做一个项目符号并使用list-style-image：
ul {
list-style-image:url('gray-bullet.gif');
}
回答by ghr
Hello maybe this answer is late but is the correct one to achieve this.
您好，也许这个答案来晚了，但它是实现这一目标的正确答案。
Ok the fact is that you must specify an internal tag to make the LIst text be on the usual black (or what ever you want to get it). But is also true that you can REDEFINE any TAGS and internal tags with CSS. So the best way to do this use a SHORTER tag for the redefinition
好吧，事实是你必须指定一个内部标签，使 LIst 文本变成通常的黑色（或者你想要的任何东西）。但是，您也可以使用 CSS 重新定义任何标签和内部标签。因此，最好的方法是使用 SHORTER 标签进行重新定义
Usign this CSS definition:
使用此 CSS 定义：
li { color: red; }
li b { color: black; font_weight: normal; }
.c1 { color: red; }
.c2 { color: blue; }
.c3 { color: green; }
And this html code:
这个 html 代码：
<ul>
<li><b>Text 1</b></li>
<li><b>Text 2</b></li>
<li><b>Text 3</b></li>
</ul>
You get required result. Also you can make each disc diferent color:
你得到所需的结果。您也可以使每个光盘具有不同的颜色：
<ul>
<li class="c1"><b>Text 1</b></li>
<li class="c2"><b>Text 2</b></li>
<li class="c3"><b>Text 3</b></li>
</ul>
回答by alaasdk
You can use Jquery if you have lots of pages and don't need to go and edit the markup your self.
如果您有很多页面并且不需要自己编辑标记，则可以使用 Jquery。
here is a simple example:
这是一个简单的例子：
$("li").each(function(){
var content = $(this).html();
var myDiv = $("<div />")
myDiv.css("color", "red"); //color of text.
myDiv.html(content);
$(this).html(myDiv).css("color", "yellow"); //color of bullet
});
回答by eggy
For a 2008 question, I thought I might add a more recent and up-to-date answer on how you could go about changing the colour of bullets in a list.
对于 2008 年的一个问题，我想我可能会添加一个更新的答案，说明如何更改列表中项目符号的颜色。
If you are willing to use external libraries, Font Awesome gives you scalable vector icons, and when combined with Bootstrap's helper classes(eg. text-success), you can make some pretty cool and customisable lists.
如果您愿意使用外部库，Font Awesome 为您提供可缩放的矢量图标，并且当与Bootstrap 的帮助类（例如text-success）结合使用时，您可以制作一些非常酷且可自定义的列表。
I have expanded on the extract from the Font Awesome list examples pagebelow:
我已经扩展了下面Font Awesome 列表示例页面的摘录：
Use
fa-ulandfa-lito easily replace default bullets in unordered lists.
使用
fa-ul和fa-li轻松替换无序列表中的默认项目符号。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul class="fa-ul">
<li><i class="fa-li fa fa-circle"></i>List icons</li>
<li><i class="fa-li fa fa-check-square text-success"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin text-primary"></i>as bullets</li>
<li><i class="fa-li fa fa-square text-danger"></i>in lists</li>
</ul>Font Awesome (mostly) supports IE8, and only supports IE7 if you use the older version 3.2.1.
Font Awesome （大部分）支持 IE8，如果您使用旧版本 3.2.1，则仅支持 IE7 。
回答by Mohammed
It works as well if we set color for each elements for example: I added some Margin to left now.
例如，如果我们为每个元素设置颜色，它也会起作用：我现在向左添加了一些边距。
<article class="event-item">
<p>Black text here</p>
</article>
.event-item{
list-style-type: disc;
display: list-item;
color: #ff6f9a;
margin-left: 25px;
}
.event-item p {
margin: 0;
color: initial;
}
回答by Mohammed
Wrap the text within the list item with a span (or some other element) and apply the bullet color to the list item and the text color to the span.
用跨度（或一些其他元素）将列表项内的文本包裹起来，并将项目符号颜色应用于列表项，并将文本颜色应用于跨度。
