如何为列表样式类型自动生成的数字着色？ [英] How to colour the list-style-type auto-generated numbers?

问题描述

我使用了以下列表：

 < ol id =footnotes> 
< a name =footnote1>< li>< / a>这是第一个脚注...< / li> 
< a name =footnote2>< li>< / a>这是第二个脚注...< / 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文本本身为黑色$ c>＃000 ），以及样式为橙色的数字（＃f90 ）。

我试过使用 list-style-color 属性，但除了打扰Web开发者工具栏（在FF3.0.8 / Ubuntu 8.04），Midori类似不显示橙色数字（我想我会在Webkit引擎中尝试，以防万一...）。

任何想法？

编辑HTML（因为我记得标​​签不一定需要包含任何东西以用作锚点）：

 < ol id =footnotes> 
< li>< a name =footnote1>< / a>这是第一个脚注...< / li> 
< li>< a name =footnote2>< / a>这是第二个脚注...< / li> 
< / ol> 
  

针对建议使用< span> 在< li> 里面。这发生了，虽然我感谢你的建议和时间，但我正在寻找（我的标准，我... ...）一个更多...语义选项。

就这样，我想我可能会使用这种方法。虽然我接受了不同的，Pete Michaud的，回答，由于其绝对的信息性质。非常感谢！

解决方案

踢球是数字技术上产生在< li> ，因此对< li> 所做的任何操作都会影响该数字。从规范：

CSS中的大多数块级元素生成一个主体块
在本节中，两个CSS机制，使元素
生成两个框：一个主要块框（对于元素的
内容）和一个单独的标记框（装饰，如
项目符号，图像或数字）。

请注意，标记框和主框都属于
同一元素 - ，列表项。因此，我们应该
期望所有< li> 样式适用于标记和内容。
这也不奇怪，如果你认为它就像列表
项本身生成编号内容（有效地它
是在CSS术语）。这在以后的规范
继续时被确认：

列表属性允许列表的基本可视化格式化， b $ b更多通用标记，带有'display：list-item'的元素生成元素内容的
主体框和一个可选的标记框
其他列表属性允许作者指定标记类型
（图像，字形或数字）及其相对于
主体框（在其内部或内部之前）的位置。他们不
允许作者指定不同的样式，fonts，alignment，
等），或者调整它相对于
主体框的位置。

因为标记属于列表，它受< li> 样式的影响，不能直接调整。为标记实现不同样式的唯一方法是在列表项中插入< span> ，并为具有要与之不同的属性的span设置样式

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:

#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).

I've tried using the list-style-color property 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...).

Any ideas?

Edited the HTML (since I remembered that the tag doesn't necessarily need to enclose anything to function as an 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>

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.

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!

解决方案

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:

"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)."

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:

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

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.

这篇关于如何为列表样式类型自动生成的数字着色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！