html - 使用 CSS 为嵌套部分自动编号-6ren

html - 使用 CSS 为嵌套部分自动编号

转载作者：太空狗更新时间：2023-10-29 13:42:38

25

4

假设我有一个这样的 HTML 或 XML 文档:

<body>
   <section>
      <h1>This should be numbered 1</h1>
      <section>
        <h1>This should be numbered 1.1</h1>
        <p>blah</p>
      </section>
      <section>
        <h1>This should be numbered 1.2</h1>
        <p>blah</p>
      </section>
   </section>
   <section>
      <h1>This should be numbered 2</h1>
      <section>
        <h1>This should be numbered 2.1</h1>
        <p>blah</p>
      </section>
   </section>
</body>

这只是一个说明性的例子；通常，一个部分中可以有任意数量的子部分，并且部分可以嵌套到任意深度。

是否可以使用 CSS(计数器和生成的内容)在每个部分标题的开头生成所需的部分编号？

我见过的这种事情唯一有效的例子是嵌套列表，但是你可以在其中将“counter-reset”附加到 OL 并将“counter-increment”附加到 LI。在这里，您似乎需要“部分”来重置其子部分，并增加其父部分，并且将这两个附加到一个元素名称是行不通的。

最佳答案

你应该使用 CSS counters在这种情况下。

更新解决方案(更好)。最后，一种更灵活的方法是重置 body 上的计数器，而不是 section:first-child 以及 h1< 的任何直接下一个兄弟节点上的计数器.

body,
section h1 + * {
    counter-reset: section 0;
}

更新的解决方案。事实证明，我原来的解决方案并不像评论中指出的那样好。这是修改后的正确版本，它应该可以与任意数量的嵌套或同级部分一起正常工作。

section:first-child,
section h1 + section {
    counter-reset: section 0;
}
section h1:before {
    counter-increment: section;
    content: counters(section, ".") " ";
}

<section>
    <h1>This should be numbered 1</h1>
    <section>
        <h1>This should be numbered 1.1</h1>
        <p>blah</p>
    </section>
    <section>
        <h1>This should be numbered 1.2</h1>
        <p>blah</p>
    </section>
    <section>
        <h1>This should be numbered 1.3</h1>
        <section>
            <h1>This should be numbered 1.3.1</h1>
            <p>blah</p>
        </section>
        <section>
            <h1>This should be numbered 1.3.2</h1>
            <p>blah</p>
        </section>
    </section>
    <section>
        <h1>This should be numbered 1.4</h1>
        <p>blah</p>
    </section>
</section>
<section>
    <h1>This should be numbered 2</h1>
    <section>
        <h1>This should be numbered 2.1</h1>
        <p>blah</p>
    </section>
    <section>
        <h1>This should be numbered 2.2</h1>
        <p>blah</p>
    </section>
</section>

原始( buggy )。在这种情况下有一个棘手的部分:计数器应该为每个后续 section 递增。这可以通过 section + section 选择器来实现:

section {
    counter-reset: section;
}
section + section {
    counter-increment: section;
}
section h1:before {
    counter-increment: section;
    content: counters(section, ".") " ";
}

<section>
    <h1>This should be numbered 1</h1>
    <section>
        <h1>This should be numbered 1.1</h1>
        <p>blah</p>
    </section>
    <section>
        <h1>This should be numbered 1.2</h1>
        <p>blah</p>
    </section>
</section>
<section>
    <h1>This should be numbered 2</h1>
    <section>
        <h1>This should be numbered 2.1</h1>
        <p>blah</p>
    </section>
</section>

关于html - 使用 CSS 为嵌套部分自动编号，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31663666/

25

4

0

文章推荐： Android:将声音保存为铃声/SQLiteConstraintException

文章推荐： git workflow master 与保持发布

文章推荐： python - 使用 PyGit2 复制“git checkout

文章推荐： HTML 选择 "Done"标签未在 Ionic for iOS 上显示

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

html - 使用 CSS 为嵌套部分自动编号