HTML - 有序列表，设置列表编号的样式，如 (a)、(i)、(aa)答案

【问题标题】：HTML - ordered list, styling the list numbers like (a), (i), (aa)HTML - 有序列表，设置列表编号的样式，如 (a)、(i)、(aa)
【发布时间】：2016-01-12 16:50:38
【问题描述】：

我已附上我的 HTML 和 CSS 文件。

我需要什么：“a”。应该像 (a) 一样包含在 () 中，并且下一级中的“i”作为 (i)，在“i”下，显示为“1”的列表编号应显示为 (aa)，然后显示为 (ab)，并且以此类推。

我希望保持原样对齐，并且只更改样式以符合我的期望。如何做到这一点？

注意：该解决方案不应导致对齐方式发生变化，并且不允许使用 JavaScript

p.p1 {
  text-indent: 0cm;
  margin-left: 36;
  word-break: break-all;
}
li {
  list-style-position: inside;
  margin-top: 10pt;
  word-break: break-all;
}
li::before {
  content: "";
  width: 13pt;
  display: inline-block;
}
.ol1 {
  padding-left: 2pt;
}
.pNote {
  text-indent: 0cm;
  margin: 0cm 0cm 10pt;
}

<ol class="ol1">
  <li>FirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirst
    <ol type="a">
      <li>Bullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-a
        <ol type="i">
          <li>Bullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-i
          </li>
          <ol type="aa">
            <li>Bullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aa
            </li>
            <li>
              Bullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-ab
            </li>
          </ol>
          <li>
            Bullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-ii
          </li>
        </ol>
      </li>
      <li>
        Bullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-b
      </li>
    </ol>
  </li>
  <li>
    SecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecond
  </li>
  <li>
    ThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThird
  </li>
</ol>

【问题讨论】：

我认为您需要使用计数器来获取格式化输出（如 (a)、(b) 等）。 CSS3 规范中有一些关于列表样式类型支持计数器样式的内容，但我认为它们尚未实现（至少不是在所有浏览器中）。
in ol (aa),(ab).. 仅在 z 完成后才会出现。即顺序是这样的 a,b,c...x,y,z,aa,ab...
我认为 dupe 关闭是错误的，因为 (a) 它没有实现类似于 OP 想要的输出，但这是较小的点 (b) 链接的线程没有实现 (aa) , (ab) 样式，这是这个问题的一个关键点。因此，我投票决定重新提出问题（再次完全忘记了单次投票可以完全重新提出问题）。
这是骗子吗？ stackoverflow.com/questions/2558358/…
@mplungjan：不，是这个 - stackoverflow.com/questions/31859932/…（我也不太确定你链接的那个，因为它不处理 (aa), (bb) 部分的问题）。我几乎要发布一个答案来解释如何实现这一点，但我对关闭的担忧不仅仅是因为这个:)

标签： html css html-lists css-counter

【解决方案1】：

据我所知，目前无法使用大括号对列表编号进行样式设置。 There was a section in the CSS3 spec about custom defining counter styles and using it along with list-style-type 但它似乎还没有完全实现（至少不是跨浏览器），所以最好的办法是使用计数器来自定义列表编号的样式，而不是使用默认的列表样式类型。

在使用计数器时，我们只需为每个级别分配一个计数器，在其对应的ol 标记处重置/初始化计数器，每当遇到li 时递增计数器的值并显示之前的计数器值使用:before 伪元素的文本。计数器值使用伪元素的content 属性显示，因此可以轻松添加大括号（就像进行字符串连接一样）。

对于 (aa), (bb) 样式，定义了 counter-style-type ，就像 varun aaruru 在他的评论中提到的那样，没有预定义的 counter/list 样式，只有这样的值在到达字母表z 之后。在默认的ol 样式中，这可以通过给出一个起始值来完成，但它仍然不会产生括号，所以我们再次必须使用计数器。在计数器中，我们可以通过将计数器的初始值本身重置为 26 来实现这一点（z 是第 26 个字母）。

下面的 sn-p 产生您正在寻找的输出。

p.p1 {
  text-indent: 0cm;
  margin-left: 36;
  word-break: break-all;
}
li {
  list-style-position: inside;
  margin-top: 10pt;
  word-break: break-all;
}
li::before {
  content: "";
  width: 13pt;
  display: inline-block;
}
.ol1 {
  padding-left: 2pt;
}
.pNote {
  text-indent: 0cm;
  margin: 0cm 0cm 10pt;
}

/* initialize counters */

ol.a {
  counter-reset: list-item-level2;
}
ol.i {
  counter-reset: list-item-level3;
}
ol.aa {
  counter-reset: list-item-level4 26;
}

/* nullify default list styling */

ol.a li,
ol.i li,
ol.aa li {
  list-style-type: none;
}

/* reset the word break for pseudo elements */

ol.a li:before,
ol.i li:before,
ol.aa li:before {
  word-break: normal;
}

/* increment the counters */

ol.a li {
  counter-increment: list-item-level2;
}
ol.i li {
  counter-increment: list-item-level3;
}
ol.aa li {
  counter-increment: list-item-level4;
}

/* display the counter values */

ol.a li:before {
  content: '('counter(list-item-level2, lower-latin)')';
  margin-right: 16px;
}
ol.i li:before {
  content: '('counter(list-item-level3, lower-roman)')';
  margin-right: 16px;
}
ol.aa li:before {
  content: '('counter(list-item-level4, lower-latin)')';
  margin-right: 28px;
}

<ol class="ol1">
  <li>FirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirst
    <ol class="a">
      <li>Bullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-a
        <ol class='i'>
          <li>Bullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-i
          </li>
          <ol class="aa">
            <li>Bullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aa
            </li>
            <li>Bullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-ab
            </li>
          </ol>
          <li>
            Bullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-ii
          </li>
        </ol>
      </li>
      <li>
        Bullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-b
      </li>
    </ol>
  </li>
  <li>
    SecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecond
  </li>
  <li>
    ThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThird
  </li>
</ol>

【讨论】：

只是为了我的理解，这个答案是否或多或少是the dupe所拥有的？
@mplungjan：我不这么认为，因为正如我在 cmets 中对问题所说的那样，它没有处理 (aa), (bb) 类型。我为 (a)、(b) 添加了一个解释，只是为了确保整个答案保留在一个地方，如果它被认为是重复搜索（或）抄袭，我可以用链接替换它。
哈利，非常感谢。一个小的变化，在列表“(a)”中，右括号将换行。对不起，我不知道 CSS
@ManojShenoy：你能在演示中展示一下吗？因为 sn-p 输出不会将其推送到下一行。另外，尝试添加ol.a li:before { word-break: normal; }（就像我为其他ols 所做的那样，它可以防止中断）。
@Harry ：在这里运行您的代码，检查行号。 7（包括空行），第7行有（a和第8行有）子弹......，所以它在“（a”之后是断线，我最不知道，我这样做是为了构建一个.chm跨度>