html - 如何为列表样式自动生成的数字着色？

Question

我正在使用以下列表:

<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(因为我记得标​​签不一定需要包含任何内容才能用作 anchor ):

<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) 的另一个不同答案，因为它的信息量很大。谢谢!

Answer 1

在 CSS3 中有一种方法，使用 Generated and Replaced Content Module .使用这种技术，您不必向 HTML 添加任何额外的标记。像这样的东西应该可以解决问题:

ol li {
    list-style-type: none;
    counter-increment: list;
    position: relative;
}

ol li:after {
    content: counter(list) ".";
    position: absolute;
    left: -2.5em;
    width: 2em;
    text-align: right;
    color: red;
}