个性化阅读
专注于IT技术分析

如何仅使用CSS在HTML列表中设置项目符号颜色?

给定项目符号的无序列表(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>

输出如下:

如何仅使用CSS在HTML列表中设置项目符号颜色?1

示例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>

输出如下:

如何仅使用CSS在HTML列表中设置项目符号颜色?2

示例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>

输出如下:

如何仅使用CSS在HTML列表中设置项目符号颜色?3

赞(0) 打赏
未经允许不得转载:srcmini » 如何仅使用CSS在HTML列表中设置项目符号颜色?
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏