HTML - 有序列表，将列表编号设置为 (a)、(i)、(aa)

Question

我已附上我的 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>

Answer 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) 样式，有定义的计数器样式类型，就像 varun aaruru 在他的评论中提到的那样，没有预定义的计数器/列表样式，只有这样的值在到达字母表 z 之后。在默认的 ol 样式中，这可以通过提供起始值来完成，但它仍然不会产生括号，因此我们必须再次使用计数器。在计数器中，我们可以通过将计数器的初始值本身重置为 26(z 是第 26 个字母表)来实现这一点。

下面的代码片段会生成您正在寻找的输出。

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>