Html 如何为列表样式类型的自动生成数字着色？

How to colour the list-style-type auto-generated numbers?

提问by David says reinstate Monica

I'm using the following list:

我正在使用以下列表：

<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>

With the following .css:

使用以下 .css：

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

#footnotes li
           {color: #000;
            }

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

The aim is to have the li/footer text itself black (#000), and the number styled to orange (#f90).

目的是使 li/footer 文本本身为黑色 ( #000)，并将数字样式设置为橙色 ( #f90)。

I've tried using the list-style-colorproperty but this does nothing except upset the Web developer toolbar (in FF3.0.8/Ubuntu 8.04), Midori similarly doesn't display the number in orange (I thought I'd try it in the Webkit engine, just in case...).

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

Any ideas?

有任何想法吗？

Edited the HTML (since I remembered that the tag doesn't necessarily need to enclose anything to function as an anchor):

编辑了 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>

In response to those that suggest using a <span>inside the <li>...yeah. That occurred, though I thank you for the suggestions and the time taken, but I was looking (li'l standardista that I am... ;) ) for a more...semantic option.

回应那些建议使用<span>内部<li>...是的。发生了这种情况，虽然我感谢您的建议和花费的时间，但我正在寻找（li'l standardista that I am... ;) ）更多...语义选项。

As it is, I think I'll probably use that approach. Though I accepted a different, Pete Michaud's, answer due to its sheer informative nature. Thanks!

事实上，我想我可能会使用这种方法。虽然我接受了一个不同的，Pete Michaud 的答案，因为它的信息量很大。谢谢！

回答by M?rten Bj?rk

There is a way in CSS3, using the Generated and Replaced Content Module. With this technique you don't have do add any extra mark-up to your HTML. Something like this should do the trick:

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;
}

回答by Can Berk Güder

This should work:

这应该有效：

<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; }

回答by Pete Michaud

Well, the kicker is that the numbers are technically generated inside the <li>, so anything you do to the <li>will affect the number. From the spec:

好吧，关键是数字在技术上是在 内部生成的<li>，因此您对 所做的任何事情<li>都会影响数字。从规范：

"Most block-level elements in CSS generate one principal block box. In this section, we discuss two CSS mechanisms that cause an element to generate two boxes: one principal block box (for the element's content) and one separate marker box (for decoration such as a bullet, image, or number)."

“CSS 中的大多数块级元素生成一个主块框。在本节中，我们将讨论导致元素生成两个框的两种 CSS 机制：一个主块框（用于元素的内容）和一个单独的标记框（用于装饰例如项目符号、图像或数字）。”

Notice that both the marker box and the principal box belong to the same element - in this case, the list item. Accordingly, we should expect all <li>styling to apply to both the marker and the content. This is also not surprising if you think about it as though the list item itself is generating the numbering content (which effectively it is doing in CSS terms). This is confirmed later on when the spec continues:

请注意，标记框和主框都属于同一个元素——在本例中为列表项。因此，我们应该期望所有<li>样式都适用于标记和内容。如果您将其视为列表项本身正在生成编号内容（在 CSS 术语中实际上是这样做的），那么这也不足为奇。稍后在规范继续时会确认这一点：

"The list properties allow basic visual formatting of lists. As with more general markers, a element with 'display: list-item' generates a principal box for the element's content and an optional marker box. The other list properties allow authors to specify the marker type (image, glyph, or number) and its position with respect to the principal box (outside it or within it before content). They do not allow authors to specify distinct style (colors, fonts, alignment, etc.) for the list marker or adjust its position with respect to the principal box."

“列表属性允许列表的基本可视化格式。与更一般的标记一样，带有 'display: list-item' 的元素为元素的内容生成一个主框和一个可选的标记框。其他列表属性允许作者指定标记类型（图像、字形或数字）及其相对于主框的位置（在内容之前或在其外部或内部）。它们不允许作者指定不同的样式（颜色、字体、对齐方式等）。列出标记或调整其相对于主框的位置。”

So because the marker belongs to the list, it is affected by the <li>styling and isn't adjustable directly. The only way to achieve a different styling for the marker is to insert a <span>inside the list item, and style the span with the properties you want to be different from the marker.

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

回答by Webmike

This simple CSS3 solution works in most browsers (IE8 and up):

这个简单的 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;
}

You may have to adjust the paddingand marginvalues depending on your situation.

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

回答by Ben

I recently had a similar problem and found an article, Styling ordered list numbers, that describes a smart way of achieving styling of the list markers without using additional tags. The article basically says that for an ordered list:

我最近遇到了类似的问题，并找到了一篇文章，为有序列表编号设置样式，它描述了一种无需使用其他标签即可实现列表标记样式的智能方法。文章基本上说对于有序列表：

The key is using CSS generated content to create and insert the counter numbers after removing the default numbering from the list.

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

For more details please see the article.

有关更多详细信息，请参阅文章。

回答by Ael

Combining some of the other answers, which I found to be incomplete, I find this most complete. It considers sub style-typesfor different levels in the hierarchy and considers that an li may be more than one line (:afterplaces at bottom line, so we use :before).

结合我发现不完整的其他一些答案，我发现这是最完整的。它考虑层次结构中不同级别的子样式类型，并考虑一个 li 可能不止一行（:after放在底线，所以我们使用:before）。

Note customizing of side character as well: 1. 1).Tested in Chrome.

还要注意侧边字符的自定义：1. 1).Tested 在 Chrome 中。

ol { counter-reset:li; }
ol li {
    list-style-type:none;
    counter-increment:li;
    position:relative;
}
ol li:before {
    content:counter(li) ")";
    position:absolute;
    left: -2.6em;
    width: 2em;
    text-align: right;
    color: #f00;
}
ol ol li:before { content:counter(li,lower-alpha) ")"; }
ol ol ol li:before { content:counter(li,lower-roman) "."; }

回答by John Gietzen

How about this?

这个怎么样？

<head>
  <style>
    #footnotes li { color: #f90; }
    #footnotes li a { color: #000; }
  </style>
</head>
<body>
  <ol id="footnotes">
    <li><a name="footnote1">This is the first footnote...</a></li>
    <li><a name="footnote2">This is the second footnote...</a></li>
  </ol>
</body>

回答by Denis Andryushchenko

You can also use "outside" list-style attribute. See here

您还可以使用“外部”列表样式属性。 看这里