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>输出如下：
评论前必须登录！
注册