混合节号和节标题

问题描述

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

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> 做的事情非常简单，那么我可能会转向。）

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

解决方法

类似的东西？

在 h1 和不跟随 sections 的 h1 上设置计数器。

将内联块添加到 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>