有没有简单的方法来改变列表中的项目符号的颜色？
我想要的只是能够将列表中的项目符号的颜色更改为浅灰色。 它默认为黑色，我不知道如何改变它。
我知道我可以使用一个图像; 我宁愿不这样做，如果我能帮助它。
子弹从文本中获取颜色。 所以，如果你想在你的列表中有一个不同的颜色项目符号，你将不得不添加一些标记。
将列表文本包装在一个范围内：
<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 */ }
我pipe理这个没有添加标记，而是使用li：之前。 这显然有所有的限制:before （没有旧的IE支持），但它似乎与一些非常有限的testingIE8，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>
这在2008年是不可能的，但是很快就会成为可能（希望）！
根据W3C CSS3规范 ，您可以完全控制在带有::marker伪元素的列表项之前生成的任何数字，字形或其他符号。 把这个应用到最受投票的答案的解决scheme：
<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 */ }
JSFiddle示例
但是请注意， 截至2016年7月 ，这个解决scheme只是W3C工作草案的一部分，并且在任何主stream浏览器中都不起作用。
如果你想要这个function，请执行以下操作：
- Blink （Chrome，Opera，Vivaldi，Yandex等）：star Chromium的问题
- 壁虎 （Firefox，Iceweasel等）：点击“（投票）”这个错误
-
三叉戟 （IE浏览器，Windowsnetworking浏览）：点击“我也可以”下的“X用户（S）可以重现此错误”
三叉戟发展已经停止 - EdgeHTML （MS边缘，Windowsnetworking视图，Windows现代应用程序）：点击这个prpopsal上的“投票”
- Webkit （Safari，Steam，WebOS等）：自己去找这个bug
<ul> <li style="color: #888;"><span style="color: #000">test</span></li> </ul>
这个方法的大问题是额外的标记。 （span标签）
你好，也许这个答案迟了，但是要达到这个目标是正确的。
好的，事实是，你必须指定一个内部标签，使LIST文本在平常的黑色（或你想得到它）。 但是，也可以使用CSS来重新定义任何标签和内部标签。 所以最好的方法是使用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>
只要在graphics程序中做一个项目符号，然后使用list-style-image ：
ul { list-style-image:url('gray-bullet.gif'); }
用span（或其他元素）包裹列表项中的文本，并将子弹色应用于列表项，将文本颜色应用于跨度。
根据W3C规范 ，
列表属性…不允许作者为列表标记指定不同的样式（颜色，字体，alignment等）…
但是，在上面的列表中的跨度的想法应该工作正常！
<ul> <li style="color:#ddd;"><span style="color:#000;">List Item</span></li> </ul>
如果你有很多页面，你可以使用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 });
对于2008年的问题，我想我可以添加一个更新的最新答案，以便如何改变列表中子弹的颜色。
如果你愿意使用外部库， Font Awesome给你可扩展的vector图标 ，当与Bootstrap的辅助类 （如text-success ）结合使用时，你可以制作一些非常酷的和可定制的列表。
我已经扩展了下面的Font Awesome列表示例页面的摘录：
使用
fa-ul和fa-li轻松replace无序列表中的默认项目符号。
<link href="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>
如果我们为每个元素设置颜色，它也可以工作：例如，我现在向左边添加了一些边距。
<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; }
你可以使用CSS来达到这个目的。 通过以您select的颜色和样式指定列表，您也可以将文本指定为不同的颜色。
<ul style="color: red;"> <li>One</li> <li>Two</li> <li>Three</li> </ul>
只需使用CSS：
<li style='color:#e0e0e0'>something</li>
你会想通过CSS设置一个“list-style”，并给它一个color：value。 例：
ul.colored {list-style: color: green;}
