代码之家 › 专栏 › 技术社区 › Amin Shah Gilani

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

semantic-markup html

Amin Shah Gilani · 技术社区 · 8 年前

例如,以下是一些原始文本:

(1) 任何人废除、颠覆、中止、暂缓执行宪法,或企图或合谋废除、颠覆、中止、暂缓执行宪法,或以武力、武力展示或任何其他违宪手段废除、颠覆、暂缓执行或暂缓执行宪法,即属叛国罪。
(2) 任何人协助、教唆或勾结第(1)款所述的行为,亦属犯叛国罪。

(3) 议会(议会)应依法规定对被判犯有叛国罪的人的惩罚。

当转换为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 从下一次开始重新开始计数?

一、 e,如何更改 ol 成为 2A ,第四个 3 .

这是一个 JS fiddle 为了让开始变得容易!:)

2 回复 | 直到 8 年前

unor Daniel Garijo 8 年前

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

仅仅因为内容是编号的,并不意味着 奥尔 必须使用(也不一定适合使用)。在语义上,它可以表示为段落的编号序列。使用 奥尔

甚至 奥尔 在语义上是合适的:如果不能用 start 和 value (在你的例子中,似乎你做不到),内容只有与CSS结合才有意义。但是我们不应该依赖CSS来传达内容的含义。没有CSS支持的用户代理(或者应用覆盖相关部分的用户特定样式表的用户代理)将得到不同的编号。当引用这些列表项时,可能会导致误解,可能是关键的误解(尤其是在法律文件的情况下)。

所以我想这样说:

<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>

ecg8 8 年前

我使用CSS计数器来控制子句和子类的编号。有点笨重,但我不知道还有别的办法。

有三个不同的柜台(大的、克劳斯的和小的)。我是从6开始大的,因为这是你开始的数字,但是你可以把它改成你想要的。Claus和sub只是在它们期望的div类出现时重置并递增。

body {
	counter-reset: claus;
}
.bignumber {
	counter-reset: big 5;
}
.bignumber::before {
	counter-increment: big;
  content: counter(big) "\2014";
}
.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>