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

Question

有序列表的默认低字母列表类型使用点'.'.有没有办法使用右括号,而不是a)... b)..等等？

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,包括嵌套列表.

Answer 2

根据DisgruntledGoat的回答,我将其扩展为支持我需要的子列表和样式.在这里分享它,以防它帮助某人.

https://jsfiddle.net/0a8992b9/输出:

(i)first roman
    (a)first alpha
    (b)second alpha
    (c)third alpha
    (d)fourth alpha
(ii)second roman
(iii)third roman
    (a)first alpha
    (b)second alpha

Answer 3

在 Firefox 和较新版本的 Chrome/Edge/Chromium 中，您可以定义自己的计数器样式，并@counter-style使用prefix和suffix属性来定义计数器之前/之后的内容。据 MDN 称，Safari 仍然不支持此功能（截至 2022 年 11 月）。

@counter-style my-new-list-style {
  system: extends lower-alpha;
  suffix: ') ';
}

.container ol {
  list-style: my-new-list-style;
}

<div class="container">
  <ol>
    <li>One.</li>
    <li>Two!</li>
    <li>Three?</li>
    <li>Four...</li>
  </ol>
</div>

Answer 4

在最初提出问题 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>

\a0in contentis  ，因为::marker不支持边距或填充。