如何使用静态字符串为分层有序列表项编号添加前缀

I can set a constant string for for each section, and need to preserve original hierarchical structure of nested OL tags. I need something as:

1. First section

  1.1. Some text here, and some fruits:
        1.1.1. Apples
        1.1.2. Oranges
  1.2. Some more text here...

2. Second section

  2.1. Some second text here, and some fruits:
        2.1.1. Bannanas
        2.1.2. Mangos
  2.2. Some more second text here...

我可以在其中对部分编号进行硬编码,但是自动CSS却需要其他所有...我尝试这样做,但无法按预期工作:样式(CSS)阻止了HTML块,

li:not(:last-child) {
	padding-bottom: 9pt;
}
ol ol > li:first-child {
	padding-top: 9pt;
}

/* hierarchical ordering:  */
ol {
	padding-left: 12pt;	
	counter-reset: item
}
li {
  display: block
}
li:before {
  content: counters(item, ".") ". ";
  counter-increment: item
}
section > ol li::before {
	position: relative;
	left:-4pt;
}
/* hard coding section numbers to avoid risks on bad browsers */
#sec1 > ol > li::before  { content: "1." counter(item) "."; }
#sec2 > ol > li::before  { content: "2." counter(item) "."; }
#sec3 > ol > li::before  { content: "3." counter(item) "."; }
<section id="sec1">
  <h1>1. First section</h1>
  <ol>
    <li>Some text here, and some fruits:
      <ol>
        <li>Apples</li>
        <li>Oranges</li>
      </ol>
    </li>
    <li>Some more text here..</li>
  </ol>
</section>

<section id="sec2">
  <h1>2. Second section</h1>
  <ol>
    <li>Some second text here, and some frits:
      <ol>
        <li>Bannanas</li>
        <li>Mangos</li>
      </ol>
    </li>
    <li>Some more second text here..</li>
  </ol>
</section>

笔记

评论
  • 牵绊情愫
    牵绊情愫 回复

    您需要做的就是为不同级别的嵌套建立不同的计数器。唯一的问题是,您需要事先知道要进行多少级操作,因为CSS不能迭代推断出嵌套的深度。

    使用标记,您将需要3级嵌套:

    • level0item will be the counter for sections
    • level1item will be the top <ol>
    • level2item will be for the first-level nested <ol>

    然后,您可以简单地在其子元素中增加这些计数器。请参阅下面的概念验证:

    li:not(:last-child) {
    	padding-bottom: 9pt;
    }
    ol ol > li:first-child {
    	padding-top: 9pt;
    }
    
    body {
      counter-reset: level0item;
    }
    
    section h1::before {
      content: counter(level0item)". ";
      counter-increment: level0item;
    }
    
    /* hierarchical ordering:  */
    section > ol {
    	padding-left: 12pt;	
    	counter-reset: level1item;
    }
    section > ol ol {
      counter-reset: level2item;
    }
    li {
      display: block;
    }
    section > ol li::before {
    	position: relative;
    	left:-4pt;
    }
    
    section > ol > li::before {
      content: counter(level0item)"." counter(level1item) ".";
      counter-increment: level1item;
    }
    section > ol ol > li::before {
      content: counter(level0item) "." counter(level1item) "." counter(level2item);
      counter-increment: level2item;
    }
    <section>
      <h1>First section</h1>
      <ol>
        <li>Some text here, and some fruits:
          <ol>
            <li>Apples</li>
            <li>Oranges</li>
          </ol>
        </li>
        <li>Some more text here..</li>
      </ol>
    </section>
    
    <section>
      <h1>Second section</h1>
      <ol>
        <li>Some second text here, and some frits:
          <ol>
            <li>Bannanas</li>
            <li>Mangos</li>
          </ol>
        </li>
        <li>Some second text here, and some frits:
          <ol>
            <li>Bannanas</li>
            <li>Mangos</li>
          </ol>
        </li>
        <li>Some second text here, and some frits:
          <ol>
            <li>Bannanas</li>
            <li>Mangos</li>
          </ol>
        </li>
      </ol>
    </section>
  • 刺青
    刺青 回复

    I removed unnecessary codes and changed h1s to h2s.

    body {
      counter-reset: item;
    }
    h2:before {
      counter-increment: item;
      content: counter(item) ". ";
    }
    ol {
      list-style-type: none;
      counter-reset: item;
    }
    li:before {
      counter-increment: item;
      content: counters(item, ".") ". ";
    }
    <section>
      <h2>First section</h1>
        <ol>
          <li>Some text here, and some fruits:
            <ol>
              <li>Apples</li>
              <li>Oranges</li>
            </ol>
          </li>
          <li>Some more text here..</li>
        </ol>
    </section>
    
    <section>
      <h2>Second section</h1>
        <ol>
          <li>Some second text here, and some frits:
            <ol>
              <li>Bannanas</li>
              <li>Mangos</li>
            </ol>
          </li>
          <li>Some more second text here..</li>
        </ol>
    </section>

    Your counter counts only li elements. You need to count h2s with the same counter too.