我想要的是能够将列表中的项目符号颜色更改为浅灰色。它默认为黑色，我无法弄清楚如何更改它。
我知道我可以使用图像;如果我能帮忙，我宁愿不这样做。
答案 0 :(得分：156)
子弹从文本中获取颜色。因此，如果您希望使用与列表中的文本不同的颜色项目符号，则必须添加一些标记。
在一个范围中包装列表文本：
<ul>
<li><span>item #1</span></li>
<li><span>item #2</span></li>
<li><span>item #3</span></li>
</ul>
然后稍微修改你的风格规则：
li {
color: red; /* bullet color */
}
li span {
color: black; /* text color */
}
答案 1 :(得分：44)
我管理了这个而没有添加标记，而是使用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:'\2022';
/* For a square bullet */
/*content:'\25A0';*/
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>
答案 2 :(得分：16)
这在2008年是不可能的，但它很快就会成为可能（希望如此）！
根据The W3C CSS3 specification，您可以完全控制在具有::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 */
}
请注意，截至2016年7月，此解决方案只是W3C工作草案的一部分，但尚未在任何主流浏览器中使用。
如果您需要此功能，请执行以下操作：
答案 3 :(得分：5)
<ul>
<li style="color: #888;"><span style="color: #000">test</span></li>
</ul>
这种方法的一个大问题是额外的标记。 （span标签）
答案 4 :(得分：2)
你好也许这个答案很晚，但是要做到这一点是正确的。
好的事实是，您必须指定一个内部标记，以使LIst文本处于通常的黑色（或者您希望获得它）。但你也可以使用CSS重新定义任何TAGS和内部标签。因此，最好的方法是使用SHORTER标签进行重新定义
使用此CSS定义：
li { color: red; }
li b { color: black; font_weight: normal; }
.c1 { color: red; }
.c2 { color: blue; }
.c3 { color: green; }
这个HTML代码：
<ul>
<li><b>Text 1</b></li>
<li><b>Text 2</b></li>
<li><b>Text 3</b></li>
</ul>
您将获得所需的结果。您还可以使每张光盘的颜色不同：
<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>
答案 5 :(得分：2)
只需在图形程序中执行一个项目符号并使用list-style-image：
ul {
list-style-image:url('gray-bullet.gif');
}
答案 6 :(得分：0)
使用span（或其他元素）将列表项中的文本换行，并将项目符号颜色应用于列表项，将文本颜色应用于span。
答案 7 :(得分：0)
答案 8 :(得分：0)
<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>
答案 9 :(得分：0)
如果你有很多页面而不需要去编辑自己的标记，你可以使用Jquery。
这是一个简单的例子：
$("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
});
答案 10 :(得分：0)
对于2008年的一个问题，我想我可以添加一个更近期和最新的答案，说明如何更改列表中项目符号的颜色。
如果您愿意使用外部库Font Awesome gives you scalable vector icons，并且与Bootstrap's helper classes结合使用（例如text-success），您可以制作一些非常酷且可自定义的列表。
我已经扩展了以下the Font Awesome list examples page的摘录：
使用
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，如果您使用older version 3.2.1，则仅支持IE7。
答案 11 :(得分：0)
如果我们为每个元素设置颜色，例如： 我现在加了一些保证金。
<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;
}
答案 12 :(得分：-1)
<ul style="color: red;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
答案 13 :(得分：-1)
您可以使用CSS来实现这一目标。通过以您选择的颜色和样式指定列表，您还可以将文本指定为不同的颜色。
按照http://www.echoecho.com/csslists.htm上的示例进行操作。
答案 14 :(得分：-2)
只需使用CSS：
<li style='color:#e0e0e0'>something</li>
答案 15 :(得分：-5)
您需要通过CSS设置“列表样式”，并为其指定颜色：值。例如：
ul.colored {list-style: color: green;}