srcmini给定项目符号的无序列表(UL), 我们需要使用CSS更改列表中项目符号的颜色。
注意：不允许使用任何图像或跨度标签。
首先, CSS中没有直接的方法可以更改无序列表中项目符号的颜色。但是, 要使用CSS更改无序列表中项目符号的颜色, 我们必须首先放弃默认的列表样式, 然后手动定义内容那来了之前列表中的每个列表项。
此内容是要用于列表的项目符号类型的Unicode。不同项目符号样式的Unicode字符如下：
- Square:” \ 25AA”
- Circle:” \ 2022″
- Disc:” \ 2022″
以下是一个示例CSS代码, 该示例代码从HTML的无序列表中删除了默认样式并使用了unicodes：
ul{
/* Remove default bullets */
list-style : none ;
}
ul li::before {
/* Add Unicode of the bullet */
content : ;
/* Color of the content -- bullet here */
color : green ;
/* Required to add space between
the bullet and the text */
display : inline- block ;
/* Required to add space between
the bullet and the text */
width : 1em ;
/* Required to add space between the
bullet and the text */
margin-left : -0.9em ;
}下面的程序说明了上述更改列表项目项目符号颜色的方法：
例子1:
<html>
<head>
<title>Changing Bullet Colors</title>
<style>
h3{
color:green;
}
ul{
list-style: none;
}
ul li::before {
/* \2022 is the CSS Code/unicode for a disc */
content: "\2022";
color: green;
display: inline-block;
width: 1em;
margin-left: -0.9em;
font-weight: bold;
font-size:1.1rem;
}
</style>
</head>
<body>
<h3>Geek Movies</h3>
<!-- Create an Unordered List -->
<ul>
<li>Star Wars</li>
<li>Back to the future</li>
<li>Ghostbusters</li>
<li>The princess bride</li>
<li>Shaun of the dead</li>
</ul>
</body>
</html>输出如下：
示例2：
<html>
<head>
<title>Changing Bullet Colors</title>
<style>
h3{
color:green;
}
ul{
list-style: none;
}
ul li::before {
/*\25E6 is the CSS Code/unicode for a circle */
content: "\25E6";
color: green;
display: inline-block;
width: 1em;
margin-left: -0.9em;
font-weight: bold;
font-size:1.1rem;
}
</style>
</head>
<body>
<h3>Geek Movies</h3>
<!-- Create an Unordered List -->
<ul>
<li>Star Wars</li>
<li>Back to the future</li>
<li>Ghostbusters</li>
<li>The princess bride</li>
<li>Shaun of the dead</li>
</ul>
</body>
</html>输出如下：
示例3：
<html>
<head>
<title>Changing Bullet Colors</title>
<style>
h3{
color:green;
}
ul{
list-style: none;
}
ul li::before {
/* \25AA is the CSS Code/unicode for a square */
content: "\25AA";
color: green;
display: inline-block;
width: 1em;
margin-left: -0.9em;
font-weight: bold;
font-size:1.1rem;
}
</style>
</head>
<body>
<h3>Geek Movies</h3>
<!-- Create an Unordered List -->
<ul>
<li>Star Wars</li>
<li>Back to the future</li>
<li>Ghostbusters</li>
<li>The princess bride</li>
<li>Shaun of the dead</li>
</ul>
</body>
</html>输出如下：
评论前必须登录！
注册