使用 ::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+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告