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

counter()

counter()

counter-reset

counter-increment

content

counter()

counters()

counter-reset

counter-increment

counter()

counters()

content

counter()

counters()

<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;
}

counter()

counters()

counters()

counter-reset

counter-increment

<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;
}

counter-reset

counters()

counter()

counter()

content

counter()

<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;
}

content

/* 示例：将编号放在一个圆形背景中 */
.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);
}

counter()

counter()

content

counter()

counter()

counter()