有没有办法在有序列表中设置列表类型的样式？ [复制]

Posted 2023-02-23

【中文标题】有没有办法在有序列表中设置列表类型的样式？ [复制]

【英文标题】：Is there any way to style list type in ordered list? [duplicate]

【发布时间】：2019-06-14 20:17:54

【问题描述】：

我正在使用有序列表

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

导致

有什么方法可以只更改项目符号（A、B 和 C）的样式，使它们更轻更小，而不影响列表？

【问题讨论】：

参见例如developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/…

【参考方案1】：

您无法设置实际计数器本身的样式，但可以将其隐藏并替换为其他内容。这可以是图像、图标或伪元素。

这是一个使用 before 伪元素的示例。

ol 
  list-style: none;
  counter-reset: li;


li::before 
  content: counter(li, upper-alpha);
  color: #999; /* whatever you wish, here is a light grey... */
  display: inline-block;
  font-size: 10px; /* whatever you need it to be... */
  margin-right: 10px;


li 
  counter-increment: li;

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

有很多不同类型的计数器，我使用了upper-alpha来匹配您的帖子。

【讨论】：

请注意// 对在 CSS 中标记 cmets 无效。它必须使用/* comment */ 进行块标记。

@connexo，很好发现！我已经习惯了写 SCSS。相应地编辑了我的答案。

这应该是选择的答案。

【参考方案2】：

li 
  font-size: 10px;
  font-weight: 200;


li span 
  font-size: 20px;
  /* example font-size, change to your liking */

<ol type="A">
  <li><span>Coffee</span></li>
  <li><span>Tea</span></li>
  <li><span>Milk</span></li>
</ol>

【讨论】：

这将改变列表样式。我只想更新列表类型。在我的情况下，只有 A、B、C 部分

是的。这只会对 A、B 和 C 进行更改。将样式添加到跨度以进行规范化。我希望你明白了，否则让我知道。我将创建和分享 jsfiddle。

谢谢你的成功

纯粹为项目符号设置整个列表的字体大小 - 然后为实际项目“选择退出”对我来说有点前后矛盾。虽然很活泼！还是不错的选择！ :-)

纯代码答案几乎从来都不是好答案。

【参考方案3】：

您显然可以根据自己的喜好更改颜色。 JSFiddle

ol  
  counter-reset: item;

ol li  
  display: block; 

ol li:before 
  content: counter(item) ". ";
  counter-increment: item;
  color: red;

<ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>