Question

我有这样的css：

.done {list-style-image:url('images/tick.gif')}
.notdone {list-style-image:url('images/cross.gif')}

和html一样：

<ul>
    <li class="done">Done</li>
    <li class="notdone">Not Done</li>
</ul>

在IE6和FF上运行良好。每个li项目都有一个不同的子弹图像。但是我在list-style-image上看到的所有文档都说它应该应用于ul标记。

是否有适当的或基于标准的方式来做我想做的事情，或者是这样吗？

编辑：http://www.w3.org/TR/CSS21/generate.html

看起来它并没有说我不能在li标签上使用list-style-image，但是这些例子没有显示出来。

Answer 1

我相信你所指的文档就是你希望子弹遵循某种格式，这就是为什么这个类应用于父标签

<ul>

在那些情况下。既然你有两张图片，每张图片都有你自己的子弹，那么我看到你正在做的事情没有错误

Answer 2

CSS 2.1标准gives examples where list-style is applied directly to an li。

虽然作者可以直接在列表项元素上指定“列表样式”信息（例如，HTML中的“li”），但他们应该小心这样做。

其次是：

ol.alpha li   { list-style: lower-alpha } /* Any "li" descendant of an "ol" */ 
ol.alpha > li { list-style: lower-alpha } /* Any "li" child of an "ol" */

所以我得出的结论是，只要您小心并了解CSS规则的级联，就可以将list-style-type或list-style-image直接应用于列出项目。

Answer 3

跟进您的编辑...

如果您查看CSS的default style sheet，您会看到li的定义如下：

li              { display: list-item }

在您提供的链接中，list-style-image对任何带有display：list-item的元素都有效。因此，根据标准，您所做的是有效的。

Answer 4

当涉及到列表图像从浏览器到浏览器的间距时，我遇到了不一致的问题。因此，我通常会跳过整个问题，而是做这样的事情：

li {list-style: none; padding-left: 15px;}    
li.done {background: url(images/tick.gif) no-repeat left top;}
li.notdone {background: url(images/cross.gif) no-repeat left top;}

最终结果是使用您想要的相同图像的子弹，但您可以更好地控制实际的放置和间距。可能需要调整，但这是一般的想法。

Answer 5

我没有看到你正在做什么的问题。你在说什么文件？

Answer 6

理论上，列表中的所有条目都具有相同的子弹样式。这些列表在历史上可以在诸如轮廓之类的东西中找到，在任何级别你都有1,2,3或A，B，C，并且将不同的序数类型相互混合是没有意义的。我认为做你风格上做的事并没有什么不妥。但我不知道CSS是否正确。

更改单个列表项目项目符号的正确方法

6 个答案: