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

::marker 选择器用于在 CSS 中选择列表项的标记。它更新项目符号或数字（即无序或有序列表）上的标记属性。我们将使用 ::marker 选择器和 color 属性来更改项目符号颜色。

语法

CSS ::marker 选择器的语法如下所示：

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

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

创建彩色垂直项目符号列表

要向项目符号列表添加颜色，请设置 ::marker 选择器。项目符号列表默认情况下垂直显示。这里，我们使用 ::marker 和 color 属性对项目符号列表进行了着色：

li::marker {
   color: orange;
}

项目符号列表为圆形，并使用 list-style 属性和 circle 值进行设置：

list-style: circle;

示例

以下是创建彩色项目符号列表的代码：

<!DOCTYPE html>
<html>
<head>
   <style>
      ul {
         list-style: circle;
         font-size: 1.2em;
      }
      li::marker {
         color: orange;
      }
   </style>
</head>
<body>
   <h2><strong>Popular Sports</strong></h2>
   <ul>
      <li>Football</li>
      <li>Cricket</li>
      <li>Volleyball</li>
      <li>Archery</li>
   </ul>
</body>
</html>

创建彩色水平项目符号列表

我们使用 ::marker 选择器为项目符号列表设置了颜色。要创建水平项目符号列表，我们为 <li> 设置了 float 属性：

float: left;

项目符号列表为方形，并使用 list-style 属性和 square 值进行设置：

list-style: square;

示例

以下是创建水平彩色项目符号列表的代码：

<!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>
   <h2><strong>Popular Sports</strong></h2>
   <ul>
      <li>Cricket</li>
      <li>Football</li>
      <li>Archery</li>
      <li>Tennis</li>
   </ul>
</body>
</html>

更新于: 2023年10月30日

1K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告