html - 通过 CSS 计数器分隔连续编号的有序列表

Question

我需要为称为登记簿的特定类型的家谱报告创建有序列表。在名册中，所有 child 都用小写罗马数字编号，有后代的 child 也用阿拉伯数字编号，像这样:

First Generation
1. Joe Smith
   2    i. Joe Smith Jr.
       ii. Fred Smith
   3  iii. Mary Smith
       iv. Jane Smith

Second Generation
2. Joe Smith Jr.
       i. Oscar Smith
   4  ii. Amanda Smith
3. Mary Smith
   5   i. Ann Evans 

你可以看到我对这个 fiddle 的初步尝试:https://jsfiddle.net/ericstoltz/gpqf0Ltu/

问题是阿拉伯数字需要代代相传，也就是说，在单独的有序列表中。当你看 fiddle 时，你可以看到第二代再次从阿拉伯数字 1 开始，但它应该以 2 开头，因为这是分配给作为 1 的 child 的那个人的数字，而 2 的第一个 child 的后代应该是 4 而不是 5。所以当我需要它更一致时，计数器会以某种部分方式继续到第二个列表。

澄清一下:这不仅仅是顺序编号。每个有后代的人都由一个唯一的数字标识，该数字将出现两次:作为 child 的那个人和作为 parent 的那个人。

由于标题的原因，需要将几代人分开，有时他们之间会有叙述。

我觉得我非常接近，只是忽略了一些让这个工作的东西!

更新:已解决。有关我如何使用两个计数器执行此操作的信息，请参阅 fiddle 。

Answer 1

是的，可以使用 <ol> 中的开始属性来完成.

您的代码应如下所示。

注册报告

第一代

乔治·史密斯。

1900 年 1 月 1 日出生于加利福尼亚州洛杉矶市。 1925 年 1 月 1 日，25 岁​​的乔治在加利福尼亚州洛杉矶与威廉·琼斯和玛格丽特·埃文斯的女儿玛丽·琼斯结婚。 1905 年 1 月 1 日出生于加利福尼亚州洛杉矶市。

article {
  counter-reset: parent-counter;
}
.register-section ol {
  margin-left: -25px;
}
.register-section li {
  position: relative;
}
.register-section li ol {
  margin-left: 50px;
  text-indent: 15px;
}
.parent {
  counter-increment: parent-counter;
}
.parent:before {
  content: counter(parent-counter);
  display: block;
  position: absolute;
  margin-left: -75px;
  top: 0;
}

<article>
  <h1>Register report</h1>
  <section class="register-section">
    <h2>First generation</h2>
    <ol>
      <li class="parent">
        <span class="spouse">George Smith.</span>
        <p>Born 1 Jan 1900 in Los Angeles, Los Angeles, California. On 1 Jan 1925, when he was 25 years old, George married Mary Jones, daughter of William Jones and Margaret Evans, in Los Angeles, Los Angeles, California. Born 1 Jan 1905 in Los Angeles,
          Los Angeles, California.</p>

        <p>They had the following children:</p>
        <ol type="i" class="children">
          <li>
            Roger Smith.
            <p>Born on 1 Nov 1927 in Los Angeles, Los Angeles, California.</p>
          </li>
          <li class="parent">
            David Smith.

          </li>
          <li>
            Amanda Smith.
            <p>Born on 1 Sep 1929 in Los Angeles, Los Angeles, California.</p>
          </li>
          <li class="parent">
            Jane Smith.
          </li>
        </ol>
      </li>
    </ol>
  </section>
  <section class="register-section">
    <h2>Second generation</h2>
    <ol start=2>
      <li class="parent"><span class="spouse">David Smith</span>
        <p>Born on 1 Nov 1927 in Los Angeles, Los Angeles, California. On 1 Jan 1947, when he was 20 years old, David married Margaret Adams, daughter of William Adams and Amelia Winter, in Los Angeles, Los Angeles, California. Born 1 Jan 1930 in Los Angeles,
          Los Angeles, California.</p>
        <p>They had the following children:</p>
        <ol start=4 type="i" class="children">
          <li>
            Edward Smith.
            <p>Born on 1 Mar 1949 in Los Angeles, Los Angeles, California.</p>
          </li>
          <li class="parent">
            Henry Smith.
          </li>
        </ol>
      </li>
    </ol>
  </section>
</article>