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

语法

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>

这给出了以下输出

基础教程