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

📅  最后修改于: 2021-09-01 03:49:14             🧑  作者: Mango

给定一个无序列表 (UL) 的项目符号,我们需要使用 CSS 更改列表中项目符号的颜色。

注意:不允许使用任何图像或跨度标签。

首先,CSS 中没有直接的方法可以更改无序列表中项目符号的颜色。但是,要使用 CSS 更改无序列表中项目符号的颜色,我们必须首先放弃默认的列表样式并手动定义列表中每个列表项之前内容

此内容是您要用于列表的项目符号类型的 Unicode。不同子弹样式的Unicode字符如下:

  • 方形"\25AA"
  • 圆圈"\2022"
  • 光盘"\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


   
        Changing Bullet Colors
          
        
  
    
  
    
    

Geek Movies

                
            
  • Star Wars
  •         
  • Back to the future
  •         
  • Ghostbusters
  •         
  • The princess bride
  •         
  • Shaun of the dead
  •     
              

输出:

示例 2:


   
        Changing Bullet Colors
          
        
  
    
  
    
    

Geek Movies

                
            
  • Star Wars
  •         
  • Back to the future
  •         
  • Ghostbusters
  •         
  • The princess bride
  •         
  • Shaun of the dead
  •     
              

输出:

示例 3:


   
        Changing Bullet Colors
          
        
  
    
  
    
    

Geek Movies

                
            
  • Star Wars
  •         
  • Back to the future
  •         
  • Ghostbusters
  •         
  • The princess bride
  •         
  • Shaun of the dead
  •     
              

输出: