首页 / 知识

关于html：是否有一种简单的方法可以更改列表中项目符号的颜色？

2023-04-16 04:31:00

Is there an easy way to change the color of a bullet in a list?

我所希望的是能够将列表中项目符号的颜色更改为浅灰色。它默认为黑色，我不知道如何更改它。

我知道我只能使用图像；如果可以的话，我宁愿不这样做。

项目符号从文本中获取颜色。因此，如果您要使用不同于列表中文本颜色的项目符号，则必须添加一些标记。

将列表文本换成跨度：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

然后稍微修改您的样式规则：

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

这种方法的最大问题是额外的标记。 (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

您会得到所需的结果。您还可以使每个光盘具有不同的颜色：

1
2
3
4
5
6
7
8
9
10
11
12
13

1
2
3
4
5
6
7

对于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

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

Black text here

</article>

.event-item{
list-style-type: disc;
display: list-item;
color: #ff6f9a;
margin-left: 25px;
}
.event-item p {
margin: 0;
color: initial;
}

用范围(或其他元素)将列表项中的文本换行，然后将项目符号颜色应用于列表项，将文本颜色应用于范围。

根据W3C规范，