CSS计数器连续编号的单独有序列表

Question

我需要为称为寄存器的特定类型的家谱报告创建有序列表。在登记册中，所有儿童都有较低案例的罗马数字，而有后代的孩子也得到了阿拉伯语数字，例如：

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 

您可以看到我对此小提琴的初步尝试：https：//jsfiddle.net/ericstoltz/gpqf0ltu/

问题在于，阿拉伯数字需要一代连续，即在单独的有序列表上。当您查看小提琴时，您可以看到第二代的阿拉伯数字以1重新开始，但是它应该以2开始，因为那是分配给该人为1个孩子的人数是4而不是5。因此，当我需要更一致时，计数器将继续以某种方式进入第二个列表。

澄清：这不仅仅是关于顺序编号。每个具有后代的人都会通过一个唯一的数字来确定，该数字将出现两次：与该人小时候，并以父母为父母。

由于标题，几代人需要分开，有时它们之间有叙述。

我觉得我非常接近，只是忽略了一些可以使它工作的东西！

更新：已解决。请参阅小提琴，以了解我如何使用两个计数器进行。

Answer 1

是的，可以使用<ol>中的启动属性完成。

您的代码应如下。

注册报告

第一代

乔治·史密斯。

1900年1月1日出生在加利福尼亚州洛杉矶的洛杉矶。1925年1月1日，乔治（George）与加利福尼亚州洛杉矶的洛杉矶威廉·琼斯（William Jones）和玛格丽特·埃文斯（Margaret Evans）的女儿玛丽·琼斯（Mary Jones）结婚。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>

Answer 2

使用CSS-Counter解决方案。使用以下代码。

article {
	  padding: 1em;
	  width: 100%;
	  max-width: 700px;
	  margin: 0 auto;
	  
	  counter-reset: section;
	}
	section{
	  counter-increment: section;
	}
	section h4:before {
	  content: counter(section) '. ';
	}
	ol{
		counter-reset: count;
	}
	
	li:before {
  		content: counter(count)".";
 	 	counter-increment: count;
	}
	li:not(.count) {
  	padding-left: 13px;
	}
	li:not(.count):before {
 	 display: none;
	}

<article>
  		<h1>Register report</h1>
  			<section>
    	<h2>First generation</h2>
    	<ol>
      		<li type="none">
	        	<h4>George Smith.</h4>
	        	<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 class="count">Roger Smith.
	            		<p>Born on 1 Nov 1927 in Los Angeles, Los Angeles, California.</p>
	          		</li>
	          		<li>David Smith.</li>
	          		<li class="count">Amanda Smith.
	           			<p>Born on 1 Sep 1929 in Los Angeles, Los Angeles, California.</p>
	          		</li>
	          		<li>Jane Smith.</li>
	        	</ol>
      		</li>
    	</ol>
  </section>
  <section>
    	<h2>Second generation</h2>
    		<ol> 
      			<li type="none">
      				<h4>David Smith</h4>
        		<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 type="i">
        		  		<li>Edward Smith.
            			<p>Born on 1 Mar 1949 in Los Angeles, Los Angeles, California.</p>
          				</li>
          				<li class="count">Henry Smith.</li>
        			</ol>
      			</li>
    		</ol>
  </section>
</article>