一尘不染

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

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)的答案,是因为其内容丰富。谢谢!


阅读 331

收藏
2020-05-16

共1个答案

一尘不染

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


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

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

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

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

2020-05-16