如何设置子弹颜色在UL/LI html列表通过CSS不使用任何图像或跨度标签

想象一个简单的无序列表，其中包含一些<li>项。现在，我通过list style将子弹定义为方形:square;然而，如果我设置<li>项目的颜色:#F00;然后一切都变成了红色!

而我只想设置方块的颜色。有没有一种优雅的方法来定义CSS中项目符号的颜色…

.．.没有使用任何精灵图像或跨度标签!

HTML

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>

CSS

li{
   list-style:square;
}

当前回答

我使用jQuery来实现这个:

jQuery('li').wrapInner('<span class="li_content" />');

&与一些CSS:

li { color: red; }
li span.li_content { color: black; }

也许有点过分，但如果你是为CMS编写代码，而你不想让编辑在每个列表项中添加额外的span，这很方便。

2011-06-04 13:01:16

其他回答

我简单地像这样解决了这个问题，它应该在所有浏览器中工作:

申力颜色:红的申里思潘颜色:蓝色; 的 <德> < li > <跨越> Foo -跨越> < < li > < li > <跨越> < /跨越> < li >酒吧 < li > <跨越蝙蝠> < /跨越> < li > < /德>

2013-10-20 13:31:59

我使用jQuery来实现这个:

jQuery('li').wrapInner('<span class="li_content" />');

&与一些CSS:

li { color: red; }
li span.li_content { color: black; }

也许有点过分，但如果你是为CMS编写代码，而你不想让编辑在每个列表项中添加额外的span，这很方便。

2011-06-04 13:01:16

最常见的做法是:

ul { list-style: none; padding: 0; margin: 0; } li { padding-left: 1em; text-indent: -.7em; } li::before { content: "• "; color: red; /* or whatever color you prefer */ } <ul> <li>Foo</li> <li>Bar</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> </ul>

JSFiddle: http://jsfiddle.net/leaverou/ytH5P/

可以在所有浏览器中运行，包括IE 8及以上版本。

2011-03-15 07:42:19

css3lists模块的当前规范确实指定了::标记伪元素，它会做你想做的事情;FF已测试不支持::marker，我怀疑Safari或Opera都有它。当然，IE并不支持它。

现在，做这个的唯一方法是使用带有list-style-image的图像。

我猜你可以用span来包装一个li的内容，然后你可以设置每个的颜色，但这对我来说似乎有点笨拙。

2011-03-15 01:55:42

浏览前一段时间，发现这个网站，你尝试过这个替代方案吗?

li{
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg==");
}

听起来很难，但你可以在这里制作自己的PNG图像/图案，然后复制/粘贴你的代码和自定义你的子弹=)仍然优雅?

编辑:

遵循@lea-verou在另一个答案上的想法，并应用外部资源增强的哲学，我得到了另一个解决方案:

在你的头脑中嵌入Webfont图标库的样式表，在这种情况下字体很棒:

从fontaweesome cheatsheet(或任何其他webfont图标)中获取代码。

例如: fa-angle-right [& # xf105;]

然后用f的最后一部分。后面跟着一个像这样的数字，还有font-family:

li:before {
    content: "\f105";
    font-family: FontAwesome;
    color: red; /* or whatever color you prefer */
    margin-right: 4px;
}

就是这样!现在你也有自定义子弹提示=)

小提琴

2012-10-31 02:46:07

如何设置子弹颜色在UL/LI html列表通过CSS不使用任何图像或跨度标签

推荐文章

最新文章

标签