如何为list-style-type自动生成的数字着色？

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),并将数字设置为orange(#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>...是的.发生了这种情况,虽然我感谢您的建议和所花费的时间,但我正在寻找(我是标准的,我是......;))更多...语义选项.

事实上,我想我可能会使用这种方法.虽然我接受了另一个与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;
}

Answer 2

这应该工作:

<ol id="footnotes">
    <li><span>This is the first footnote...</span></li>
    <li><span>This is the second footnote...</span></li>
</ol>

#footnotes li { color: #f90; }
#footnotes li span { color: #000; }

Answer 3

好吧,踢球者是数字在技术上是在内部产生的<li>,所以你做的任何事<li>都会影响数字.从规格:

"CSS中的大多数块级元素生成一个主要块框.在本节中,我们将讨论两个导致元素生成两个框的CSS机制:一个主要块框(用于元素的内容)和一个单独的标记框(用于装饰)如子弹,图像或数字)."

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

"列表属性允许列表的基本可视化格式.与更常见的标记一样,带有'display:list-item'的元素会为元素的内容生成一个主框和一个可选的标记框.其他列表属性允许作者指定标记类型(图像,字形或数字)及其相对于主框的位置(在内部之前或内部之前).它们不允许作者为其指定不同的样式(颜色,字体,对齐等)列表标记或相对于主框调整其位置."

因此,因为标记属于列表,所以它受<li>样式影响并且不能直接调整.为标记实现不同样式的唯一方法是<span>在列表项内插入一个内容,并使用您希望与标记不同的属性设置范围样式.

Answer 4

这个简单的CSS3解决方案适用于大多数浏览器(IE8及更高版本):

ul {
    padding-left: 14px;
    list-style: none;
}
ul li:before {
    color: #f90;
    content: "•";
    position: relative; 
    left: -7px;
    font-size: 18px;
    margin-left: -7px;
}

您可能需要根据您的具体情况调整padding和margin值.

Answer 5

我最近遇到了类似的问题,发现了一篇文章,Styling有序列表编号,描述了一种在不使用其他标签的情况下实现列表标记样式的智能方法.该文章基本上表示对于有序列表:

关键是使用CSS生成的内容在从列表中删除默认编号后创建和插入计数器编号.

有关详细信息,请参阅文章.