计数器与列表样式

计数器与列表样式

CSS3的计数器功能为列表项编号提供了更灵活的控制方式。配合::marker伪元素和list-style属性，可以创建出传统HTML列表无法实现的复杂编号系统。

基础计数器使用

通过counter-reset初始化计数器，counter-increment增加计数值，content属性显示计数：

ol {
  counter-reset: section;
  list-style: none;
}
li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
}

这个例子会生成类似"1.1"、"1.2"的多级编号。counters()函数自动处理嵌套关系，第二个参数指定连接符。

列表样式类型扩展

CSS3新增了多种列表标记样式：

ul {
  list-style-type: square; /* 传统样式 */
}

ul.modern {
  list-style-type: "→ "; /* 自定义字符 */
  padding-left: 1.2em;
  text-indent: -1.2em;
}

还支持这些预定义值：

• disclosure-open/disclosure-closed 用于可折叠列表
• hebrew 希伯来编号
• cjk-ideographic 中文计数

多列列表布局

结合CSS多列属性创建报刊式列表：

.multicol-list {
  column-count: 3;
  column-gap: 2em;
}
li {
  break-inside: avoid;
  page-break-inside: avoid;
}

自定义标记内容

使用@counter-style规则完全自定义计数系统：

@counter-style circled-alpha {
  system: alphabetic;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ;
  suffix: " ";
}

ul.custom {
  list-style: circled-alpha;
}

动画计数器

通过CSS动画实现动态计数效果：

@keyframes count-up {
  from { --num: 0 }
  to { --num: 100 }
}

.counter {
  animation: count-up 3s ease-out forwards;
  counter-reset: num var(--num);
}
.counter::after {
  content: counter(num);
}

需要配合JavaScript处理变量：

document.documentElement.style.setProperty('--num', targetValue);

多语言列表

针对不同语言设置适当的编号系统：

:lang(zh) ol {
  list-style-type: cjk-decimal;
}
:lang(he) ol {
  list-style-type: hebrew;
}
:lang(ja) ol {
  list-style-type: japanese-formal;
}

复杂嵌套示例

创建法律文档的多级编号：

.doc {
  counter-reset: chapter section subsection;
}
.chapter {
  counter-increment: chapter;
  counter-reset: section;
}
.chapter h2::before {
  content: "第" counter(chapter, cjk-decimal) "章 ";
}
.section {
  counter-increment: section;
  counter-reset: subsection;
}
.section h3::before {
  content: counter(chapter) "." counter(section) " ";
}

列表样式位置控制

list-style-position的进阶用法：

ul.indent-markers {
  list-style-position: inside;
  padding-left: 0;
  li {
    text-indent: -1em;
    padding-left: 1.5em;
  }
}

响应式列表设计

根据视口大小切换列表样式：

@media (max-width: 600px) {
  .responsive-list {
    list-style-type: none;
    li {
      display: flex;
      &::before {
        content: "•";
        color: var(--accent);
        padding-right: 0.5em;
      }
    }
  }
}

计数器与表格结合

在表格行前添加自动编号：

table {
  counter-reset: row;
}
tr {
  counter-increment: row;
}
td:first-child::before {
  content: counter(row);
  display: inline-block;
  width: 2em;
}

打印优化的列表

确保分页时列表标记可见：

@media print {
  ul, ol {
    list-style-position: inside;
  }
  li {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

计数器重置模式

理解计数器作用域：

.container {
  counter-reset: item 5; /* 从5开始计数 */
}
.new-section {
  counter-reset: item 0; /* 重置为0 */
}

创意列表标记

使用CSS渐变和形状：

ul.gradient-markers li::marker {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: linear-gradient(45deg, #ff8a00, #e52e71);
  border-radius: 50%;
  margin-right: 8px;
}