我怎样才能给每个<li>自己的子弹图像？

Question

我试过了

<ul id="contact_list">
    <li id="phone">Local 604-555-5555</li>
    <li id="i18l_phone">Toll-Free 1-800-555-5555</li>
</ul>

同

#contact_list
{
    list-style: disc none inside;
}

#contact_list #phone
{
    list-style-image: url(images/small_wood_phone.png);
}

#contact_list #i18l_phone
{
    list-style-image: url(images/i18l_wood_phone.png);
}

无济于事.仅出现光盘.如果我希望每个单独的列表项都有自己的项目符号,我怎么能用css完成这个,而不使用背景图像.

编辑:我发现,尽管firebug告诉我,列表样式图像规则正在以某种方式被覆盖.如果我内联规则,就像这样:

    <li id="phone" style="list-style-image: url(images/small_wood_phone.png);">Local 604-555-5555</li>

那一切都很好.由于我在测试用例中没有其他规则我在选择器中运行包含ul或li,我不确定为什么内联会给出不同的结果.

Answer 1

试试这个:

#contact_list li
{
    list-style: none;
}

#contact_list li#phone
{
    list-style-image: url('images/small_wood_phone.png');
}

#contact_list li#i18l_phone
{
    list-style-image: url('images/i18l_wood_phone.png');
}

Answer 2

我不确定这是否是您的问题,但您使用的是图片的相对链接.当您在css中使用相对链接时,它与css文件相关,但如果它是内联的,则它将相对于html页面.

Answer 3

首先确定您是否处于“怪异”模式，因为对于许多 CSS 属性来说，这会产生影响。

其次，W3c规定URL 应该用双引号括起来（尽管我也不使用引号）。遵循规范可以避免以后的麻烦。

如果您在 DOCTYPE 中指定“strict”，则根据标准，浏览器可能需要双引号。