HTML / CSS自动编号标题？答案

【问题标题】：HTML / CSS autonumber headings?HTML / CSS自动编号标题？
【发布时间】：2009-02-11 03:45:03
【问题描述】：

有没有办法（理想情况下很容易）在 HTML/CSS 中使标题和部分自动编号？也许是一个 JS 库？

或者这是在 HTML 中很难做到的事情？

我正在寻找一个企业 wiki 应用程序，但我们希望能够像在文字处理器中一样使用标题编号。

【问题讨论】：

标签： javascript html css

【解决方案1】：

绝对可以使用 css 计数器 - 只要确保您注意浏览器兼容性...：

这将使 h2 得到 1.、2.、h3 得到 1.1、2.1、2.2 等等...

<style>
   body{counter-reset: section}
   h2{counter-reset: sub-section}
   h3{counter-reset: composite}
   h4{counter-reset: detail}

   h2:before{
     counter-increment: section;
     content: counter(section) " ";
   }
   h3:before{
     counter-increment: sub-section;
     content: counter(section) "." counter(sub-section) " ";
   }
   h4:before{
     counter-increment: composite;
     content: counter(section) "." counter(sub-section) "." counter(composite) " ";
   }
   h5:before{
     counter-increment: detail;
     content: counter(section) "." counter(sub-section) "." counter(composite) "." counter(detail) " ";
   }
   </style>

正如 lpfavreau 所说，it's the same as another question 我相信。

另请注意，使用 css 将不会更改标题（例如，所选文本将为您提供不带数字的标题）。这可能是可取的，也可能不是可取的。 lpfavreau 的（已接受）答案将为您提供修改标题文本的 jquery 代码。

详情请见MDN: Using CSS counters。

第三方编辑

我创建了一个example with the css above

【讨论】：

我当然希望 OP 不喜欢他的代码在两个以上的浏览器上工作。
“两个浏览器”有点苛刻。不支持任何版本的 IE，尽管几乎是一个表演障碍，除非你有一个非常严格控制的目标受众。
有人听说过优雅降级吗？在我的网站中，使用适当浏览器的人会得到一些不错的数字。 IE 将只有标题。总比没有数字要好，而且我不打算让 IE 工作（大概在 IE8 中）
[评论编辑/澄清]“不打算让 IE 工作”+ 像这样微不足道的事情。我相信这是一种增强，而不是必需品。（我完全赞成让 IE 为重要的东西工作）
只是给自己一个快速提醒check against this comment

【解决方案2】：

2016 年更新。请参阅下面的Stephen's answer，了解 CSS 中的正确方法。当浏览器和库不同时，我的回答在 2009 年是有意义的。我们现在生活在一个全新的世界中，这里介绍的方法已经过时了。我要把它留给那些仍然生活在由 IE7 和眼泪组成的企业缩影中的可怜人。

如果您想知道如何在 CSS 中做到这一点，请参阅 this other question，答案可能就是您正在寻找的。但是标题也有一个很好的建议，这取决于您的 HTML 文档是如何制作的。

应该注意的是，正如 Triptych 在另一条评论中所说，这只有在您可以控制使用哪些浏览器并且使用 CSS 的内部工具时才有意义，因为修改 HTML 将很难例子。对此 CSS 功能的支持是有限的。

当然也很容易使用jQuery 之类的东西来进行增量。像这样未经测试的sn-p：

$(document).ready(function() {
  $('h1').each(function(index) {
    $(this).html((index + 1) + '. ' + $(this).html());
  });
});

当然不要忘记在您的文档中包含 jquery.js 文件。

【讨论】：

jQuery 必须是——CSS 计数器的想法看起来不错，但由于我们的 IT 团队只支持 IE7 并且只计划升级到 IE8，因此无法使用。 FF, Safari, Opera 等不受欢迎（但用户可以安装）。
请注意，这种方法会改变标题。使用 css 会使标题名称不带数字。
对任何用于在加载时生成 HTML 的 javascript 立即投反对票。这就是为什么许多现代网页一旦加载就会滞后的原因。
@TomášZato：你是绝对正确的，我已经更新了答案以反映新的现实。

【解决方案3】：

最简单的方法是编号列表

<ol>
<li> Section
    <ol>
      <li>Nested one</li>
      <li>Nested two</li>
    </ol>
</li>
<li>Section</li>
<li>Section</li>
<li>Section</li>
<ol>

会是这样的：

部分
一、嵌套一个
二、嵌套两个
部分
部分
部分

【讨论】：

【解决方案4】：

可以在服务器端或使用 JavaScript 完成。不知道有任何预制脚本可以做到这一点。

至少不可能使用 HTML/CSS - 除非您手动将所有数字添加到标题中。

【讨论】：

使用 CSS 并非不可能。 CSS 默认使用列表执行此操作。为什么其他元素会有所不同？
因为将整个大文档标记为有序列表在语义上是不正确的。另外，在大型文档中，您可能希望将这些部分称为 1、1.1、1.2、1.3 等，而这是 OL 无法实现的。

【解决方案5】：

列表可以做到这一点，为什么其他元素不能呢？ http://www.w3.org/TR/CSS2/generate.html#scope

【讨论】：

【解决方案6】：

<ol>
  <li>Heading 1</li>
  <li>Heading 2</li>
  <li>Heading 3</li>
</ol>

【讨论】：

【解决方案7】：

可以使用 HTML 本身使用有序列表实现自动编号，并在必要时嵌套它们。下面是一个活生生的例子的链接，这个例子是我在谷歌上快速搜索后找到的。

http://archive.corewebprogramming.com/Chapter2/Nested-Ordered-Lists.html

也可以使用无序列表和 CSS，如下例所示：

http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/

【讨论】：