如何在不使用任何图像项目符号或任何跨度标签的情况下通过 CSS 定义 OL/LI 列表中字符的颜色？

Posted 2023-02-23

【中文标题】如何在不使用任何图像项目符号或任何跨度标签的情况下通过 CSS 定义 OL/LI 列表中字符的颜色？

【英文标题】：How to define the color of characters in OL/LI lists via CSS, WITHOUT using any image bullets or any span tag?

【发布时间】：2014-01-20 04:41:47

【问题描述】：

嗯，mi问题和这个问题很相似：How to define the color of characters in OL/LI lists via CSS, WITHOUT using any image bullets or any span tag?

但在我的情况下，我想为低字母列表（或任何有序列表）中的字母设置样式，但考虑到每个项目都有不同的内容，所以我不能使用 content:""; 技巧.

没有 JS 什么的有没有办法做到这一点？ 我tried to play with different combinations of pseudo classes and pseudo elements，但我认为这不是正确的方式。

我试过的代码，你可以在小提琴中看到：

相关 HTML

<ol>
  <li>Hola</li>  
  <li>Hola</li>  
  <li>Hola</li>  
  <li>Hola</li>  
  <li>Hola</li>
</ol>

我尝试过的 CSS（没有成功）

/*ol li:first-letter color:red;*/
/*ol li:first-child color:red;*/
/*ol li:before content:"lower-alpha";*/
/*ol li:before:first-letter content:"lower-alpha";*/
/*ol:first-letter li color:red;*/
ol:first-letter li color:red;
ol li color:black;

【问题讨论】：

好的，向我们展示您正在使用的 相关 (minimal/SSCCE) html 和 CSS，并清楚地说明最终结果应该是什么样子。理想情况下 also（但 not 'instead'）为我们提供JS Fiddle 或类似的演示，展示您的相关 HTML 和 CSS。在撰写此评论时，您的代表是 >1200；到目前为止，您应该知道如何发布问题，而无需我们询问基础知识（例如相关代码）。

@David Thomas 请仔细阅读问题。在我尝试的问题中，有一个由我制作的 jsFiddle，目前问题中没有编辑。

@DavidThomas 事实上，社区已经在使用我的小提琴来测试答案，你看到了吗？

但您还没有费心在您的问题中显示代码。演示是一个不错的奖励，但它确实并且应该不被视为在此处向我们展示您的代码的替代品。

你是对的，代码应该有问题，以防实例消失或发生任何其他事故。就是这样。

【参考方案1】：

使用 ol 或 li CSS 属性为列表的项目符号/字符设置样式。然后使用 span 标记内联将实际的列表项文本更改为不同的内容。

 li 
     color: green;
 
span 
    color: black;

http://jsfiddle.net/jRVH5/9/

【讨论】：

这怎么不使用span标签？ :)

糟糕.. 我错过了那部分。我看到没有使用任何图像或项目符号。感谢您的澄清。

如果我可以更改标记，这根本不是一个糟糕的解决方案；）感谢您的解决方案。

【参考方案2】：

以下是使用计数器重置/计数器增量属性的可能性：

ol list-style:none; margin:0; padding:0; counter-reset:list;
ol li margin:0 0 5px; padding:0;
ol li:before 
    counter-increment:list;
    content:counter(list, lower-alpha) ". ";
    color:red;

见小提琴：http://jsfiddle.net/jRVH5/14/

【讨论】：

感谢您教我这些属性，我不知道这些属性是否存在（或者我忘记了），但这正是我想要的。

【参考方案3】：

为后代：浏览器的最新添加（FF68+、Ch80+）

::marker 
   color: red;

https://developer.mozilla.org/en-US/docs/Web/CSS/::marker