使用 ::marker CSS 选择器更改列表项目符号颜色

cssweb developmentfront end technology更新于 2024/5/16 5:00:17

语法

CSS ::marker 选择器的语法如下 −

Selector::marker {
   attribute: /*value*/;
}

示例

以下示例说明了 CSS ::marker 选择器。

<!DOCTYPE html>
<html>
   <head>
      <style>
         ul {
            list-style: circle;
            font-size: 1.2em;
         }
         li::marker {
            color: green;
         }
      </style>
   </head>
   <body>
      <h2><strong>TMNT</strong></h2>
      <ul>
         <li>Raphael</li>
         <li>Donatello</li>
         <li>Michaelangelo</li>
         <li>Leonardo</li>
      </ul>
   </body>
</html>

这将给出以下输出

示例

<!DOCTYPE html>
<html>
   <head>
      <style>
         ul {
            list-style: square;
            overflow: hidden;
         }
         li::marker {
            color: green;
         }
         li {
            width: 15%;
            margin: 2%;
            float: left;
            box-shadow: inset 2px 0px 10px lightblue;
         }
      </style>
   </head>
   <body>
      <ul>
         <li>ting</li>
         <li>tong</li>
         <li>ding</li>
         <li>dong</li>
      </ul>
   </body>
</html>

这将给出以下输出