想象一个简单的无序列表,其中包含一些<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;
}

当前回答

这就行了。

li{
  color: #fff;
}

其他回答

Lea Verous的解决方案很好,但我想要更多地控制子弹的位置,所以这是我的方法:

.entry ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* hide overflow in the case of floating elements around ... */
    overflow: hidden;
}
.entry li { 
    position: relative;
    padding-left: 24px;
}
.entry li:before {
    /* with absolute position you can move this around or make it bigger without getting unwanted scrollbars */
    position: absolute;
    content: "• ";
    color: #E94E24;
    font-size: 30px;
    left: 0;
    /* use fonts like "arial" or use "sans-serif" to make the dot perfect round */ 
    font-family: Arial, sans-serif;
}

我试过了,结果感觉怪怪的。css在本教程的:after {content: "";}部分后停止工作。我发现你可以通过使用color:#ddd;在li项本身上。

举个例子。

li{
    color:#ff0000;    
    list-style:square;                
}
a {
    text-decoration: none;
    color:#00ff00;
}

a:hover {
    background-color: #ddd;
}

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

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

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

编辑:

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

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

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

小提琴

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

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

我使用jQuery来实现这个:

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

&与一些CSS:

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

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