如何给列表样式类型的自动生成的数字上色？

小编典典

如何给列表样式类型的自动生成的数字上色？

css

我正在使用以下列表：

<ol id="footnotes">
    <a name="footnote1"><li></a>This is the first footnote...</li>
    <a name="footnote2"><li></a>This is the second footnote...</li>
</ol>

使用以下.css：

#footnotes {list-style-type: decimal;
            list-style-color: #f90;
            }

#footnotes li
           {color: #000;
            }

#footnotes a li,
#footnotes li a
           {color: #f90;
            }

目的是使li / footer文本本身为黑色（#000），数字样式为橙色（#f90）。

我尝试使用该list-style-color属性，但这除了使Web开发人员工具栏（在FF3.0.8 / Ubuntu
8.04中不可用）之外没有任何作用，Midori同样不会以橙色显示该数字（我想我会在Webkit引擎中尝试使用它，以防万一…）。

有任何想法吗？

编辑了HTML（因为我记得该标记不一定需要包含任何内容即可用作锚点）：

<ol id="footnotes">
    <li><a name="footnote1"></a>This is the first footnote...</li>
    <li><a name="footnote2"></a>This is the second footnote...</li>
</ol>

对于那些建议<span>在<li>… 内使用内幕的回应。发生这种情况，尽管我感谢您的建议和所花费的时间，但是我一直在寻找（我是…的li’l
standardista））一种更…语义的选择。

实际上，我想我可能会使用这种方法。尽管我接受一个不同的答案，但皮特·米肖（Pete Michaud）的答案，是因为其内容丰富。谢谢！

阅读 349

2020-05-16

共1个答案

小编典典

好吧，最重要的是数字是在内技术生成的<li>，因此您对进行的任何操作<li>都会影响该数字。从规格：

“
CSS中大多数块级元素都会生成一个主体块框。在本节中，我们讨论两种CSS机制使一个元素生成两个框：一个主体块框（用于元素的内容）和一个单独的标记框（用于装饰）例如子弹，图片或数字）。”

请注意，标记框和主体框都属于同一元素-
在这种情况下，是列表项。因此，我们应该期望所有<li>样式都适用于标记和内容。如果您将其视为列表项本身正在生成编号内容（实际上是用CSS术语执行），这也就不足为奇了。以后在规格继续时将对此进行确认：

“列表属性允许列表的基本视觉格式。与更通用的标记一样，具有’display：list-
item’的元素会生成元素内容的主体框和可选的标记框。其他列表属性允许作者指定标记类型（图像，字形或数字）及其相对于主体框的位置（位于内容框外部或位于内容框内），不允许作者为字体指定不同的样式（颜色，字体，对齐方式等）列出标记或相对于主体框调整其位置。”

因此，由于标记属于列表，因此它会受到<li>样式的影响，并且不能直接调整。实现标记不同样式的唯一方法是<span>在列表项中插入一个内部，并用您想要与标记不同的属性来设置范围。

2020-05-16