更改 html 列表中项目符号的颜色？
[英]Change the color of a bullet in a html list?
问题描述
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.如果我能帮上忙，我宁愿不这样做。
16 个解决方案
解决方案1
160 已采纳 2008-09-16 20:28:38
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 */
}
解决方案2
45 2010-11-26 21:14:16
I managed this without adding markup, but instead using li:before.我在没有添加标记的情况下进行了管理，而是使用了 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.这显然具有:before所有限制（没有旧的 IE 支持），但经过一些非常有限的测试后，它似乎适用于 IE8、Firefox 和 Chrome。 It's working in our controller environment, wondering if anyone could check this.它在我们的控制器环境中工作，想知道是否有人可以检查一下。 The bullet style is also limited by what's in unicode.子弹样式也受 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>
解决方案3
17 2013-04-16 15:10:03
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 ::marker pseudo-element.根据W3C CSS3 规范，您可以完全控制在带有::marker伪元素的列表项之前生成的任何数字、字形或其他符号。 To apply this to the most voted answer's solution:将此应用于投票最多的答案的解决方案：
<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 Blink （Chrome、Opera、Vivaldi、Yandex 等）：明星 Chromium 的问题
- Gecko (Firefox, Iceweasel, etc.): Click "(vote)" on this bug Gecko （Firefox、Iceweasel 等）：在此错误上单击“（投票）”
-
Trident (IE, Windows web views): Click "I can too" under "X User(s) can reproduce this bug"Trident （IE、Windows 网页视图）：单击“X 用户可以重现此错误”下的“我也可以”
Trident development has ceased三叉戟发展已停止 - EdgeHTML (MS Edge, Windows web views, Windows Modern apps): Click "Vote" on this prpopsal EdgeHTML （MS Edge、Windows Web 视图、Windows Modern 应用程序）：在此 prpopsal 上单击“投票”
- Webkit (Safari, Steam, WebOS, etc.): CC yourself to this bug Webkit （Safari、Steam、WebOS 等）：CC 自己解决此错误
解决方案4
6 2008-09-16 20:27:05
<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) （跨度标签）
解决方案5
3
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).好吧，事实是你必须指定一个内部标签，使 LIst 文本变成通常的黑色（或者你想要的任何东西）。 But is also true that you can REDEFINE any TAGS and internal tags with CSS.但是，您也可以使用 CSS 重新定义任何标签和内部标签。 So the best way to do this use a SHORTER tag for the redefinition因此，最好的方法是使用 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>
解决方案6
2 2012-04-19 22:11:00
Just do a bullet in a graphics program and use list-style-image :只需在图形程序中做一个项目符号并使用list-style-image ：
ul {
list-style-image:url('gray-bullet.gif');
}
解决方案7
0 2013-01-05 20:34:05
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
});
解决方案8
0 2015-11-25 03:47:45
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 page below:我已经扩展了下面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 。
解决方案9
0 2017-06-15 12:57:35
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;
}
解决方案10
0
用跨度（或一些其他元素）将列表项内的文本包裹起来，并将项目符号颜色应用于列表项，并将文本颜色应用于跨度。
解决方案11
0 2008-09-16 20:29:26
解决方案12
0
<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>
解决方案13
-1 2008-09-16 20:29:27
<ul style="color: red;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
解决方案14
-1
You could use CSS to attain this.您可以使用 CSS 来实现这一点。 By specifying the list in the color and style of your choice, you can then also specify the text as a different color.通过以您选择的颜色和样式指定列表，您还可以将文本指定为不同的颜色。
Follow the example at http://www.echoecho.com/csslists.htm .按照http://www.echoecho.com/csslists.htm 上的示例进行操作。
解决方案15
-2 2008-09-16 20:28:17
只需使用CSS：
<li style='color:#e0e0e0'>something</li>
解决方案16
-5 2008-09-16 20:28:01
You'll want to set a "list-style" via CSS, and give it a color: value.您需要通过 CSS 设置一个“列表样式”，并给它一个 color: 值。 Example:例子：
ul.colored {list-style: color: green;}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.