如何覆盖有序列表中一个特定 li 的编号

How do I override the numbering for one specific li in an ordered list

我正在转录带有有序列表的法律文件,但有一个问题。立法者很懒惰,在第2条和第3条之间添加新条款时,他们将其命名为2A。

例如,这里有一些原文:

6 High treason
(1) Any person who abrogates or subverts or suspends or holds in abeyance, or attempts or conspires to abrogate or subvert or suspend or hold in abeyance, the Constitution by use of force or show of force or by any other unconstitutional means shall be guilty of high treason.
(2) Any person aiding or abetting or collaborating the acts mentioned in clause (1) shall likewise be guilty of high treason.
(2A) An act of high treason mentioned in clause (1) or clause (2) shall not be validated by any court including the Supreme Court and a High Court.
(3) Majlis-e-Shoora (Parliament) shall by law provide for the punishment of persons found guilty of high treason.

当转换为 HTML 时,它被标记为:

<article>
  <div>
    <div>6&mdash;<em>High treason</em></div>
  </div>
  <div>
    <ol type="1">
    <li>Any person who abrogates or subverts or suspends or holds in abeyance, or attempts or conspires to abrogate or subvert or suspend or hold in abeyance, the Constitution by use of force or show of force or by any other unconstitutional means shall be guilty of high treason.</li>
    <li>Any person aiding or abetting  or collaborating the acts mentioned in clause (1) shall likewise be guilty of high treason.</li>
    <li>An act of high treason mentioned in clause (1) or clause (2) shall not be validated by any court including the Supreme Court and a High Court.</li>
    <li>Majlis-e-Shoora (Parliament) shall by law provide for the punishment of persons found guilty of high treason.</li>
    </ol>
  </div>
</article>

它(显然)呈现为:

6—High treason
  1. Any person who abrogates or subverts or suspends or holds in abeyance, or attempts or conspires to abrogate or subvert or suspend or hold in abeyance, the Constitution by use of force or show of force or by any other unconstitutional means shall be guilty of high treason.
  2. Any person aiding or abetting or collaborating the acts mentioned in clause (1) shall likewise be guilty of high treason.
  3. An act of high treason mentioned in clause (1) or clause (2) shall not be validated by any court including the Supreme Court and a High Court.
  4. Majlis-e-Shoora (Parliament) shall by law provide for the punishment of persons found guilty of high treason.

问题:如何覆盖特定 li 上的数字并从下一个开始重新计数?

即,如何将 ol 中的第 3 项更改为 2A,并将第 4 项更改为 3

这里有一个JS fiddle让你轻松上手! :)

我使用了 CSS 计数器来控制您的条款和子条款的编号。它有点笨拙,但我不知道还有什么其他方法可以做到这一点。

共有三种不同的计数器(big、claus 和 sub)。我从 6 开始大,因为这是你开始的数字,但你可以将它更改为任何你想要的。当他们期望的 div 的 类 出现时,Claus 和 sub 就会被重置和递增。

body {
 counter-reset: claus;
}
.bignumber {
 counter-reset: big 5;
}
.bignumber::before {
 counter-increment: big;
  content: counter(big) "14";
}
.clause {
 counter-reset: sub;
}
.clause::before {
 counter-increment: claus;
 content: "(" counter(claus) ") ";
}
.subclause::before {
 counter-increment: sub;
 content: "(" counter(claus) counter(sub, upper-alpha) ") ";
}
<article>
  <div class="bignumber"><em>High treason</em></div>
  <div class="clause">Any person who abrogates or subverts or suspends or holds in abeyance, or attempts or conspires to abrogate or subvert or suspend or hold in abeyance, the Constitution by use of force or show of force or by any other unconstitutional means shall be guilty of high treason.</div>
  <div class="clause">Any person aiding or abetting  or collaborating the acts mentioned in clause (1) shall likewise be guilty of high treason.</div>
  <div class="subclause">An act of high treason mentioned in clause (1) or clause (2) shall not be validated by any court including the Supreme Court and a High Court.</div>
  <div class="clause">Majlis-e-Shoora (Parliament) shall by law provide for the punishment of persons found guilty of high treason.</div>
  <div class="subclause">Here is a subclause that should be 3A.</div>
  <div class="subclause">Here is a subclause that should be 3B.</div>
  <div class="clause">And now on to 4 and beyond....</div>
</article>

我建议不要使用ol,也不要使用其他列表元素。

只是因为内容已编号,并不意味着必须使用 ol(也不一定适合使用它)。从语义上讲,它可以表示为段落的编号序列。如果您有层次结构(即嵌套列表),则可以保证使用 ol,但此处似乎并非如此。

Even if ol 在语义上是合适的:如果你不能用 startvalue 表示编号(而且看起来你不能,在你的情况下),内容只有与 CSS 结合才有意义。但是我们不应该依赖 CSS 来传达内容的含义。没有 CSS 支持的用户代理(或应用覆盖相关部分的用户特定样式 sheet 的用户代理)将获得不同的编号。引用这些列表项时,可能会导致误解,甚至可能造成严重误解(尤其是在法律文件的情况下)。

所以我会选择这样的东西:

<section>
  <h2>6 High treason</h2>

  <p>(1) Any person who abrogates or subverts or suspends or holds in abeyance, or attempts or conspires to abrogate or subvert or suspend or hold in abeyance, the Constitution by use of force or show of force or by any other unconstitutional means shall be guilty of high treason.</p>
  <p>(2) Any person aiding or abetting or collaborating the acts mentioned in clause (1) shall likewise be guilty of high treason.</p>
  <p>(2A) An act of high treason mentioned in clause (1) or clause (2) shall not be validated by any court including the Supreme Court and a High Court.</p>
  <p>(3) Majlis-e-Shoora (Parliament) shall by law provide for the punishment of persons found guilty of high treason.</p>

</section>

这也允许您使用 a 作为数字,以便可以链接特定的子句:

<section id="6">
  <h2>6 High treason</h2>

  <p id="6-1">
    <a href="#6-1">(1)</a>
    Any person who abrogates or subverts or suspends or holds in abeyance, or attempts or conspires to abrogate or subvert or suspend or hold in abeyance, the Constitution by use of force or show of force or by any other unconstitutional means shall be guilty of high treason.
  </p>

  <p id="6-2">
    <a href="#6-2">(2)</a>
    Any person aiding or abetting or collaborating the acts mentioned in clause <a href="#6-1">(1)</a> shall likewise be guilty of high treason.
  </p>

  <p id="6-2A">
    <a href="#6-2A">(2A)</a>
    An act of high treason mentioned in clause <a href="#6-1">(1)</a> or clause <a href="#6-2">(2)</a> shall not be validated by any court including the Supreme Court and a High Court.
  </p>

  <p id="6-3">
    <a href="#6-3">(3)</a>
    Majlis-e-Shoora (Parliament) shall by law provide for the punishment of persons found guilty of high treason.
  </p>

</section>