带右括号的有序列表 (HTML) 小字母？

Question

有序列表的默认低字母列表类型使用点“.”。有没有办法使用右括号来代替 a)… b) ..等？

原文由 Tony_Henrich 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一个巧妙的解决方案。 （老实说，我对此感到惊讶。）CSS 有一个叫做 计数器 的东西，你可以在其中设置，例如，每个标题的自动章节编号。稍作修改即可得到以下内容；您需要自己整理填充等。

 ol {
  counter-reset: list;
}
ol > li {
  list-style: none;
}
ol > li:before {
  content: counter(list, lower-alpha) ") ";
  counter-increment: list;
}

 <span>custom list style type (v1):</span>
<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

适用于所有现代浏览器和 IE9+（可能还有 IE8，但可能有问题）。

更新： 我添加了子选择器以防止嵌套列表选择父样式。 trejder 在评论中也提出了一个很好的观点，即列表项对齐也搞砸了。 456bereastreet 上的一篇文章 有一个很好的解决方案，涉及绝对定位柜台。

 ol {
    counter-reset: list;
}
ol > li {
    list-style: none;
    position: relative;
}
ol > li:before {
    counter-increment: list;
    content: counter(list, lower-alpha) ") ";
    position: absolute;
    left: -1.4em;
}

 <span>custom list style type (v2):</span>
<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

这是一个显示结果的 jsFiddle ，包括嵌套列表。

原文由 DisgruntledGoat 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在最初提出问题 10 多年后，标准（以及在某种程度上，实现）似乎已经赶上了。

CSS现在提供 ::marker 伪类，可用于实现自定义列表标记： MDN 。

使用 ::marker 自动缩进 li 的内容，没有任何黑客攻击。根据 MDN，截至 2021 年 2 月，它在 Firefox、Chrome 和 Edge 中得到支持，并在 Safari 中得到部分支持（不适用于此用例）。

 .container {
  width: 400px;
}

ol.custom-marker {
  counter-reset: list;
}

ol.custom-marker > li {
  list-style: none;
  counter-increment: list;
}

ol.custom-marker.parens-after.decimal > li::marker {
  content: counter(list) ")\a0";
}

ol.custom-marker.parens-around.lower-roman > li::marker {
  content: "(" counter(list, lower-roman) ")\a0";
}

 <div class='container'>
  <ol class='custom-marker parens-after decimal'>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Quis varius quam quisque id diam.</li>
    <li>Another list here
      <ol class='custom-marker parens-around lower-roman'>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Quis varius quam quisque id diam.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Quis varius quam quisque id diam.</li>
      </ol>
    </li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Quis varius quam quisque id diam.</li>
  </ol>
</div>

\a0 content   ::marker

原文由 Mak 发布，翻译遵循 CC BY-SA 4.0 许可协议