有没有一种简单的方法可以更改列表中项目符号的颜色？
时间：2020-03-05 18:57:04 来源:igfitidea点击:
我所希望的是能够将列表中项目符号的颜色更改为浅灰色。它默认为黑色，我不知道如何更改它。
我知道我只能使用图像；如果可以的话，我宁愿不这样做。
解决方案
回答
<ul> <li style="color: #888;"><span style="color: #000">test</span></li> </ul>
这种方法的最大问题是额外的标记。 (span标签)
回答
用范围(或者其他元素)将列表项中的文本换行，并将项目符号颜色应用于列表项，将文本颜色应用于范围。
回答
我们将要通过CSS设置"列表样式"，并为其指定一个color：值。例子：
ul.colored {list-style: color: green;}
回答
只需使用CSS：
<li style='color:#e0e0e0'>something</li>
回答
项目符号从文本中获取颜色。因此，如果我们要使用与列表中的文本不同的彩色项目符号，则必须添加一些标记。
将列表文本换成跨度：
<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 */
}
回答
根据W3C规范，
The list properties ... do not allow authors to specify distinct style (colors, fonts, alignment, etc.) for the list marker ...
但是上面列表中具有跨度的想法应该可以正常工作！
回答
<ul style="color: red;"> <li>One</li> <li>Two</li> <li>Three</li> </ul>
- 一
- 二
- 三
回答
<ul> <li style="color:#ddd;"><span style="color:#000;">List Item</span></li> </ul>
回答
我们可以使用CSS来达到此目的。通过以我们选择的颜色和样式指定列表，我们还可以将文本指定为其他颜色。
按照http://www.echoecho.com/csslists.htm上的示例进行操作。
回答
我们好，也许这个答案来晚了，但是是实现这一目标的正确答案。
好的事实是，我们必须指定一个内部标记，以使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>
回答
我在不添加标记的情况下进行了管理，而是使用了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:'22';
/* For a square bullet */
/*content:'A0';*/
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>
