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

发布于 2024-07-16 15:07:32 字数 664 浏览 9 评论 0原文

我有这样的 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，但示例没有显示这一点。

原文

I have css like this:

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

And html like this:

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

Works great on IE6 and FF. Each li item has a different image for the bullet. But all of the docs I see on list-style-image says it should be applied to to the ul tag.

Is there a proper or standards-based way of doing what I am trying to do, or is this it?

EDIT: http://www.w3.org/TR/CSS21/generate.html

It looks like it doesn't say that I CAN'T use list-style-image on an li tag, but the examples don't show that.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

愿得七秒忆 2024-07-23 15:07:32

将类应用于父标记的原因

<ul>

我相信您所指的文档是当您希望项目符号遵循某种格式时，这就是在这些情况下。由于您有两个图像，每个图像都有自己的项目符号，所以我认为您所做的事情没有任何问题

I believe docs you are referring to is when you want the bullets to follow a certain format, which is why the class is applied at the parent tag

<ul>

in those cases. Since you have two images that each you want to have its own bullet I see nothing wrong with what you are doing

回复收藏 0 原文

滥情空心 2024-07-23 15:07:32

CSS 2.1 标准给出了示例，其中 list- style 直接应用于 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" */

所以我得出的结论是，直接应用 list-style-type 或 list-style-image 来列出项目是可以的，只要你仔细并理解 CSS 规则的级联。

The CSS 2.1 standard gives examples where list-style is applied directly to an li.

Although authors may specify 'list-style' information directly on list item elements (e.g., "li" in HTML), they should do so with care.

Followed by:

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" */

So I would draw the conclusion that it is OK to apply list-style-type or list-style-image to list items directly, as long as you are careful and understand the cascade of your CSS rule.

回复收藏 0 原文

无人问我粥可暖 2024-07-23 15:07:32

进行编辑...

如果您查看 default CSS 样式表，您将看到 li 定义如下：

li              { display: list-item }

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

Following up to your edit...

If you look at the default style sheet for CSS, you will see that li is defined as follows:

li              { display: list-item }

In the link you provided, list-style-image is valid on any element with display: list-item. Therefore, according to the standard, what you are doing is valid.

回复收藏 0 原文

两人的回忆 2024-07-23 15:07:32

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

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

最终结果是使用与您最初想要的相同图像的项目符号，但您对实际位置和间距有更多的控制权。可能需要调整，但这是总体思路。

I've run into inconsistencies when it comes to the spacing of a list-image from browser to browser. As a result, I would usually skip the whole issue, and do something like this instead:

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

The end result is a bullet using the same images you intended in the first place, but you have much more control over the actual placement and spacing. Tweaking needed probably, but that's the general idea.

回复收藏 0 原文