如何使用 @counter-style 规则通过 CSS 自定义列表项?

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

列表是 Web 开发的基础组成部分，用于以有组织、有结构的方式呈现信息。HTML 中有三种类型的列表:有序列表、无序列表和定义列表。然而，当我们需要根据自身需求设计列表时，设置列表的样式可能会很困难。CSS 提供了 @counter-style 规则，让我们能够以更灵活、更具创意的方式自定义列表项标记。

在本文中，我们将学习如何使用 @counter-style 规则通过 CSS 自定义列表项。@counter-style 规则用于定义不属于预定义样式集的计数器样式，并定义如何将计数器值转换为字符串表示形式。

什么是 @counter-style?

@counter-style 规则用于定义可与 CSS counter 属性结合使用的计数器样式。此规则用于定义自定义列表项标记样式。counter 属性允许我们增加或减少计数器，该计数器用于生成 :before 和 :after 等伪元素的内容。

语法

@counter-style name {
    // 写入所有 CSS 样式的属性和值
}

name 参数用于指定我们正在定义的计数器样式的名称。在花括号内，我们可以定义一组控制计数器外观的属性和值。我们可以使用的一些属性包括:-

System - 指定要使用的数字系统，例如小数、小写字母、大写罗马数字等。
Symbols - 指定计数器每个级别使用的符号。
Suffix - 指定在计数器值后添加的后缀。
Prefix - 指定在计数器值前添加的前缀。
Pad - 指定显示计数器值时使用的最小位数。

在 CSS 中使用 @counter-styles 规则的步骤

以下是在 CSS 中使用 @counter-styles 规则的步骤−

步骤 1:创建有序列表

第一步是创建一个有序列表，并使用我们自己的列表项标记对其进行自定义。在下面的示例中，我们希望使用罗马数字代替默认的数字系统。以下是列表的 HTML 代码 −

<ol>
   <li>Learn to code in python</li>
   <li>Learn to code in java</li>
   <li>Learn to code in c++</li>
</ol>

步骤 2:定义 @counter-style

@counter-style my-numerals {
    system: upper-roman;
    symbol: I II III IV V VI VII VIII IX X;
}

在上面的代码中，我们定义了一个名为 my-numerals 的计数器样式，并将系统属性设置为 upper-roman，这意味着计数器将设置为使用列表中的大写罗马数字。除此之外，我们还将符号的属性设置为从 I 到 X 的罗马数字字符串。

Step 3: CSS Styles

ol {
   counter-reset: section;
}
li {
   counter-increment: section;
   list-style: none;
}
li:before {
   content: counter(section, my-numerals) ". ";
   margin-right: 10px;
}

在上面的代码中，将 counter-reset 属性设置为 ol 元素的 section，这进一步意味着计数器将从 0 开始。在这里，我们还将 counter-increment 属性设置为每个 li 元素的 section。

示例 1

<html>
<head>
   <title>Example to use @counter-style to customize the List Item Markers using CSS</title>
   <style>
      /* Defining a custom counter style to have the list as upper roman numerals */
      @counter-style roman-numerals {
         system: upper-roman;
         symbols: I II III IV V VI VII VIII IX X;
      }
      /* applying the custom counter style to the ordered list */
      ol {counter-reset: section; }
      /* incrementing the counter for each list item */
      li {counter-increment: section; list-style: none;}
      /* using the counter value to display the custom list item marker */
      li:before {
         content: counter(section, roman-numerals) ". ";
         margin-right: 8px;
         color: green;
         font-size: 15px;
      }
   </style>
</head>
<body>
   <h3>Example to use @counter-style to customize the List Item Markers using CSS</h3>
   <p>In this example, we have used the @counter-style rule to customize the list item markers of an ordered list.</p>
   <ol>
      <li>Learn to code in python</li>
      <li>Learn to code in java</li>
      <li>Learn to code in c++</li>
   </ol>
</body>
</html>

在上面的例子中，我们使用 @counter-style 规则定义了一个名为 my-roman 的自定义计数器样式。在这里，我们将系统属性设置为 upper-roman 以使用大写罗马数字，并将符号的属性设置为从 I 到 X 的罗马数字字符串。

之后，我们使用 counter-reset 属性将自定义计数器样式应用于有序列表，并使用 counter-increment 属性为每个列表项增加计数器，并使用 list-style 属性删除默认列表项标记。

最后，为了显示带有罗马数字的自定义列表项标记，我们使用了 :before 伪元素，其中包含 content 属性和 counter 函数(包含两个参数:计数器名称(本例中为 section)和计数器样式名称(本例中为 roman-numerals)。

示例 2

<html>
<head>
   <title>Example to use @counter-style to customize the List Item Markers using CSS</title>
   <style>
      /* removing the default list item markers */
      ul { list-style: none;}
      /* using images as list item markers */
      li:before {
         content: "";
         display: inline-block;
         width: 25px;
         height: 25px;
         background-image: url("yourimage.png");
         background-repeat: no-repeat;
         margin-right: 8px;
      }
   </style>
</head>
<body>
   <h3>Example to use @counter-style to customize the List Item Markers using CSS</h3>
   <p>In this example, we have used the @counter-style rule to customize the list item markers of an ordered list.</p>
   <ol>
      <li>Learn to code in python</li>
      <li>Learn to code in java</li>
      <li>Learn to code in c++</li>
   </ol>
</body>
</html>

在上面的例子中，我们利用无序列表元素的 list-style 属性移除了默认的列表项标记。此外，我们还使用了 :before 伪元素，并结合 content 属性和一个空字符串来显示列表项。

我们将 display 属性设置为 inline-block，以确保图像正确显示，并将 width 和 height 属性设置为标记图像的大小。我们使用 background-image 属性指定标记图像的 URL，并使用 background-repeat 属性防止图像重复。最后，我们使用 margin-right 属性在图像右侧添加了边距。

总结

使用 HTML 列表时，可以使用 CSS 中的 @counter-style 规则自定义列表项标记的外观。此规则提供了一种简单灵活的方式来定义列表项标记的自定义样式，尤其适用于有序列表。 @counter-style 规则的语法包含多个参数，例如系统、符号、后缀、前缀和填充。这些参数允许修改列表项标记的外观。使用 @counter-style 规则，可以更轻松地创建符合当前项目设计需求的列表项标记。