如何使用CSS的counter()函数实现自动编号效果？counter()简化列表和章节编号

<div class="numbered-sections">     <p>这是第一个段落。</p>     <p>这是第二个段落。</p>     <p>这是第三个段落。</p> </div>

.numbered-sections {     counter-reset: section-counter; /* 初始化一个名为 section-counter 的计数器 */ }  .numbered-sections p::before {     counter-increment: section-counter; /* 每遇到一个 p 元素，section-counter 就递增 */     content: counter(section-counter) ". "; /* 在 p 元素前显示计数器值，并加上点和空格 */     font-weight: bold;     color: #333;     margin-right: 5px; }

<div class="document-outline">     <section>         <h2>第一章 介绍</h2>         <p>章节内容...</p>         <section>             <h3>1.1 什么是CSS counter()</h3>             <p>子章节内容...</p>             <section>                 <h4>1.1.1 历史背景</h4>                 <p>更深一层的内容...</p>             </section>         </section>         <section>             <h3>1.2 工作原理</h3>             <p>另一个子章节...</p>         </section>     </section>     <section>         <h2>第二章 进阶应用</h2>         <p>章节内容...</p>     </section> </div>

.document-outline {     counter-reset: chapter-counter; /* 顶级章节计数器 */ }  .document-outline > section {     counter-reset: sub-chapter-counter; /* 每个顶级 section 重置子章节计数器 */ }  .document-outline > section > h2::before {     counter-increment: chapter-counter;     content: counter(chapter-counter) ". ";     font-size: 1.5em;     font-weight: bold; }  .document-outline > section > section > h3::before {     counter-increment: sub-chapter-counter;     /* 这里使用 counters() 来连接所有名为 sub-chapter-counter 的计数器 */     content: counter(chapter-counter) "." counter(sub-chapter-counter) " ";     font-size: 1.2em;     font-weight: bold; }  /* 更深层级的编号，需要更精细的控制 */ .document-outline section section section h4::before {     counter-increment: sub-sub-chapter-counter; /* 假设我们为H4引入了新的计数器 */     content: counters(chapter-counter, ".") " "; /* 这是一个更灵活的用法，用点连接所有同名计数器 */     /* 实际上，更准确的写法可能是这样，如果每个section都重置一个通用的section-level计数器 */     /* content: counter(chapter-counter) "." counter(sub-chapter-counter) "." counter(sub-sub-chapter-counter) " "; */     /* 但为了演示 counters() 的通用性，我们可以简化一下 */     /* 假设我们这样组织：     .document-outline { counter-reset: sec; }     .document-outline section { counter-reset: sec; }     .document-outline section h2::before { counter-increment: sec; content: counter(sec) ". "; }     .document-outline section section h3::before { counter-increment: sec; content: counters(sec, ".") " "; }     */     /* 让我们回到更清晰的命名方式，并修正H4的计数 */ }  /* 修正H4的计数，使其更符合实际的多级计数逻辑 */ .document-outline > section > section {     counter-reset: sub-sub-chapter-counter; /* 每个二级 section 重置三级章节计数器 */ }  .document-outline > section > section > section > h4::before {     counter-increment: sub-sub-chapter-counter;     content: counter(chapter-counter) "." counter(sub-chapter-counter) "." counter(sub-sub-chapter-counter) " ";     font-size: 1em;     font-weight: bold; }

<ul class="custom-list">     <li>苹果</li>     <li>香蕉</li>     <li>橙子</li> </ul>  <div class="custom-chapters">     <h2>引言</h2>     <h2>核心概念</h2>     <h2>结论</h2> </div>

.custom-list {     counter-reset: item-num;     list-style: none; /* 移除默认的列表样式 */ }  .custom-list li::before {     counter-increment: item-num;     content: "项目 " counter(item-num) ": "; /* 添加“项目”前缀和冒号后缀 */     color: blue;     font-weight: bold;     margin-right: 5px; }  .custom-chapters {     counter-reset: chapter-num; }  .custom-chapters h2::before {     counter-increment: chapter-num;     content: "第 " counter(chapter-num) " 章 - "; /* 添加“第”前缀和“章 -”后缀 */     color: #8B0000; /* 深红色 */     font-family: 'Georgia', serif;     font-size: 1.2em; }

/* 示例：将编号放在一个圆形背景中 */ .custom-list li::before {     counter-increment: item-num;     content: counter(item-num); /* 仅显示数字 */     display: inline-block;     width: 24px;     height: 24px;     line-height: 24px;     text-align: center;     border-radius: 50%; /* 圆形背景 */     background-color: #f0f0f0;     color: #555;     font-weight: bold;     margin-right: 8px;     box-shadow: 0 1px 2px rgba(0,0,0,0.1); }