注册报告

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的孩子，并且2的子女中的第一个应该是后代的当我需要它更加一致时，计数器会以某种局部的方式继续到第二个列表。

澄清一下：这不仅仅是关于顺序编号。每个有后代的人都会被一个唯一的号码标识，并且该号码会出现两次：将该人视为儿童并将该人视为父母。

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

我觉得我很亲密，只是忽略了一些东西才能让它发挥作用！

更新：已解决。请参阅两个计数器，了解我是如何做到这一点的。

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>

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>

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

2 个答案:

注册报告

第一代