HTML

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 但它似乎还没有完全实现（至少没有 cross-browser），所以最好的办法是使用计数器来自定义列表编号的样式，而不是使用默认的列表样式类型。

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

对于 (aa)、(bb) 样式，定义了 counter-style-type，就像 varun aaruru 在他的评论中提到的那样，没有 pre-defined counter/list 样式只有在达到字母 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>

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

HTML - ordered list, styling the list numbers like (a), (i), (aa)

css

html-lists

css-counter