我所希望的是能够将列表中项目符号的颜色更改为浅灰色。 它默认为黑色，我不知道如何更改它。
我知道我只能使用图像； 如果可以的话，我宁愿不这样做。
项目符号从文本中获取颜色。因此，如果您要使用不同于列表中文本颜色的项目符号，则必须添加一些标记。
将列表文本换成跨度：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <ul>
<li>
<span>item #1</span>
</li>
<li>
<span>item #2</span>
</li>
<li>
<span>item #3</span>
</li>
</ul> |
然后稍微修改您的样式规则：
1
2
3
4
5
6
| li {
color: red; /* bullet color */
}
li span {
color: black; /* text color */
} |
我在不添加标记的情况下进行了管理，而是使用li：before。显然，这具有:before的所有限制(不支持旧的IE)，但是经过一些非常有限的测试后，它似乎可以与IE8，Firefox和Chrome一起使用。它正在我们的控制器环境中运行，想知道是否有人可以检查这一点。项目符号样式也受Unicode中的限制。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| <!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伪元素的列表项之前生成的任何数字，字形或其他符号。
要将其应用于投票最多的答案的解决方案：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <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月，此解决方案只是W3C工作草案的一部分，尚不能在任何主流浏览器中使用。
如果需要此功能，请执行以下操作：
-
闪烁(Chrome，Opera，Vivaldi，Yandex等)：Chromium的问题
-
Gecko(Firefox，Iceweasel等)：在此错误上单击"(投票)"
-
Trident(IE，Windows Web视图)：单击" X用户可以重现此错误"下的"我也可以"
Trident开发已停止
-
EdgeHTML(MS Edge，Windows Web视图，Windows Modern应用程序)：在此公告上单击"投票"
-
Webkit(Safari，Steam，WebOS等)：CC自己解决此错误
1
2
3
4
5
6
7
| <ul>
<li style="color: #888;"><span style="color: #000">test</span>
</li>
</ul> |
这种方法的最大问题是额外的标记。 (span标签)
只需在图形程序中做一个项目符号并使用list-style-image：
1
2
3
| ul {
list-style-image:url('gray-bullet.webp');
} |
您好，也许这个答案来晚了，但是是实现这一目标的正确答案。
好的事实是，您必须指定一个内部标记，以使LIst文本显示为通常的黑色(或您要获取的文本)。但您也可以使用CSS重新定义任何标签和内部标签，这也是事实。因此，执行此操作的最佳方法是使用SHORTER标签进行重新定义
对此CSS定义进行签名：
1
2
3
4
5
| li { color: red; }
li b { color: black; font_weight: normal; }
.c1 { color: red; }
.c2 { color: blue; }
.c3 { color: green; } |
而这个html代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <ul>
<li>
Text 1
</li>
<li>
Text 2
</li>
<li>
Text 3
</li>
</ul> |
您会得到所需的结果。您还可以使每个光盘具有不同的颜色：
1
2
3
4
5
6
7
8
9
10
11
12
13
| <ul>
<li class="c1">Text 1
</li>
<li class="c2">Text 2
</li>
<li class="c3">Text 3
</li>
</ul> |
1
2
3
4
5
6
7
| <ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span>
</li>
</ul> |
对于2008年的问题，我想我可能会添加一个最新的最新答案，内容涉及如何更改列表中项目符号的颜色。
如果您愿意使用外部库，Font Awesome会为您提供可缩放的矢量图标，并且当与Bootstrap的帮助程序类(例如text-success)结合使用时，您可以创建一些非常酷且可自定义的列表。
我在下面的Font Awesome列表示例页面上对摘录进行了扩展：
Use fa-ul and fa-li to easily replace default bullets in unordered lists.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| < 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">List icons
</li >
<li >
<i class ="fa-li fa fa-check-square text-success">can be used
</li >
<li >
<i class ="fa-li fa fa-spinner fa-spin text-primary">as bullets
</li >
<li >
<i class ="fa-li fa fa-square text-danger">in lists
</li >
</ul > |
Font Awesome(大多数情况下)支持IE8，并且仅在使用旧版本3.2.1时才支持IE7。
如果您有很多页面并且不需要去编辑自己的标记，则可以使用Jquery。
这是一个简单的示例：
1
2
3
4
5
6
7
| $("li").each(function(){
var content = $(this).html();
var myDiv = $("")
myDiv.css("color","red"); //color of text.
myDiv.html(content);
$(this).html(myDiv).css("color","yellow"); //color of bullet
}); |
如果我们为每个元素设置颜色，例如，它也可以正常工作：
我现在增加了一些保证金。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <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;
} |
用范围(或其他元素)将列表项中的文本换行，然后将项目符号颜色应用于列表项，将文本颜色应用于范围。
根据W3C规范，
The list properties ... do not allow authors to specify distinct style (colors, fonts, alignment, etc.) for the list marker ...
但是上面列表中包含跨度的想法应该可以正常工作！
您可以使用CSS实现此目的。通过以您选择的颜色和样式指定列表，您还可以将文本指定为其他颜色。
按照http://www.echoecho.com/csslists.htm上的示例进行操作。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <ul style="color: red;">
<li>
One
</li>
<li>
Two
</li>
<li>
Three
</li>
</ul> |
只需使用CSS：
1
2
| <li style='color:#e0e0e0'>something
</li> |
您将要通过CSS设置"列表样式"，并为其指定一个color：值。例：
1
| ul.colored {list-style: color: green;} |
