📌  相关文章
📜  HTML | DOM 样式 counterIncrement 属性(1)

📅  最后修改于: 2023-12-03 15:15:36.654000             🧑  作者: Mango

HTML | DOM 样式 counterIncrement 属性

简介

counterIncrement 是 HTML | DOM 样式属性之一。它用于定义一个自定义计数器的增量，也就是每次计数器加1的值。该属性仅适用于使用 CSS 的 counter-reset 属性定义的计数器。它可以使用负整数、零或正整数值，值可以是小数或百分数。默认值是 1。

语法
counter-increment: none|id value|initial|inherit;
  • none：不改变计数器的值。
  • id：定义要改变的计数器的名称。
  • value：指定计数器的增量值。可以使用负整数、零或正整数值，值可以是小数或百分数。默认值是 1。
  • initial：将该属性重置为其默认值。
  • inherit：从父元素继承该属性的值。
示例
HTML 代码示例：
<!DOCTYPE html>
<html>

<body>
  <p>使用 counter-increment 属性：</p>
  <ol>
    <li>这是第一项</li>
    <li>这是第二项</li>
    <li style="counter-increment: custom-counter;">这是第三项</li>
    <li>这是第四项</li>
    <li style="counter-increment: custom-counter;">这是第五项</li>
    <li>这是第六项</li>
    <li>这是第七项</li>
    <li>这是第八项</li>
  </ol>
</body>

</html>
CSS 代码示例：
ol {
  counter-reset: custom-counter;
}

li.custom-counter:before {
  content: counter(custom-counter) ". ";
}
效果

使用 counter-increment 属性定义自定义计数器的增量，实现有规律的列表编号效果。

  1. 这是第一项
  2. 这是第二项
  3. 这是第三项
  4. 这是第四项
  5. 这是第五项
  6. 这是第六项
  7. 这是第七项
  8. 这是第八项
总结

counterIncrement 属性是一个定义自定义计数器增量的样式属性。它仅适用于使用 counterReset 定义的计数器。使用 counterIncrement 和 counterReset 属性可以实现更加灵活的列表格式，也可以用于其他一些需要计数的场景，例如页码计数等。