混合章节编号和章节标题

Question

我们想要呈现如下所示的文本：

1. 简介。这是一个命名的部分。

本节有第二段。

2. 这个没有名字。从逻辑上讲，它是引言的一部分。

3. 第二部分。这个确实有名字。

4.这个（未命名的）部分是一个以“第二部分”开头的组的一部分。

5.这个也是。

这个例子的理想标记是

<section>
  <h1>Introduction</h1>
  <section>
    <p>Here is a named section.</p>
    <p>This section has a second paragraph.</p>
  </section>
  <section><p>This one does not have a name. It is logically a part of the introduction.</p></section>
</section>
<section>
  <h1>The second section</h1>
  <section><p>This one does have a name.</p></section>
  <section><p>This (unnamed) section is part of a group beginning with “The second section”.</p></section>
  <section><p>This one is too.</p></section>
</section>

我不想将章节编号放在标记中；换句话说，最好使用 CSS 计数器。确实简单地获取节号很容易，尽管making them run into the text as above is tricky.

您可能想知道这是怎么回事，以及为什么我不使用订单列表。答案是最终目的是将 Donald Knuth 和其他人编写的文字程序从WEB（可能最终是CWEB）输入翻译成HTML。下面是一个WEB 程序的示例，按照通常的方式，由 TeX 格式化：http://mirrors.ctan.org/info/knuth-pdf/web/tangle.pdf。 WEB 程序在概念上是一堆被重新排列成机器可读代码以进行编译的部分。因此<section> 似乎最适合标记。 （但是，如果我尝试使用 <ol> 做的事情非常简单，那么我可能会进行调整。）

总结：如何设置标记的样式以创建所需的格式？

Answer 1

这样的？

在h1 和未关注h1 的sections 上设置计数器。

将 inline-block 添加到 h1 和其后的 section 以使它们共享同一行。

编辑：使用新 CSS 更新

   /*** NUMBERING ***/

body {
  counter-reset: increment;
}

/* ignore all paragraphs in first section following h1 */
section > h1 + section > p::before {
  counter-increment: none;
  content: none;
}

h1::before,
section > section > p::before {
  counter-increment: increment;
  content: counter(increment) ". ";
  font-size: 1rem;
  font-weight: bold;
}

    /*** SHARING THE SAME ROW ***/

h1 {
  display: inline-block;
  font-size: 1rem;
  margin: 0px;
}

section > h1 + section {
  display: inline;
}

section > h1 + section > p:first-child {
  display: inline;
}

<section>
  <h1>Introduction</h1>
  <section>
    <p>Here is a named section.</p>
    <p>This section has a second paragraph.</p>
  </section>
  <section>
    <p>This one does not have a name. It is logically a part of the introduction.</p>
  </section>
</section>
<section>
  <h1>The second section</h1>
  <section>
    <p>This one does have a name.</p>
  </section>
  <section>
    <p>This (unnamed) section is part of a group beginning with “The second section”.</p>
  </section>
  <section>
    <p>This one is too.</p>
  </section>
</section>

编辑：旧答案

body {
  counter-reset: increment;
}

section > h1::before,
section > section ~ section::before {
  counter-increment: increment;
  content: counter(increment) ". ";
  font-size: 1rem;
  font-weight: bold;
}

h1 {
  display: inline-block;
  font-size: 1rem;
  margin: 0px;
}

h1 + section {
  display: inline-block;
}

section > section {
  margin-bottom: 1rem;
}

<section>
  <h1>Introduction</h1>
  <section>Here is a named section…</section>
  <section>This one does not have a name…</section>
</section>
<section>
  <h1>The second section</h1>
  <section>This one does have a name.</section>
  <section>This (unnamed) section…</section>
  <section>This one is too.</section>
</section>