混合节号和节标题

Question

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

1. Introduction. Here is a named section.

This section has a second paragraph.

2. This one does not have a name. It is logically a part of the Introduction.

3. The second section. This one does have a name.

4. This (unnamed) section is part of a group beginning with “The second section”.

5. This one is too.

这个例子的理想标记是

<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 (and perhaps eventually CWEB) input. Here is an example of a WEB program, as formatted, in the usual manner, by TeX: http://mirrors.ctan.org/info/knuth-pdf/web/tangle.pdf翻译成HTML。 WEB 程序在概念上是一堆重新排列成 machine-readable 代码以供编译的部分。因此 <section> 似乎最适合标记。（但是，如果 <ol> 我想做的事情非常简单，那么我可能会转向。）

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

Answer 1

是这样的吗？

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

向 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>

混合节号和节标题

Mixing section numbers and section headings

html

css

html-heading