如何仅仅通过 CSS 设置 HTML 列表 UL/LI 中的项目符号颜色, 不能使用任何图像或 span 标签

小开

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

所以现在，做到这一点的唯一方法是使用list-style-image的图像。

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

小开

你能做的最简单的事情是将<li>的内容包装在<span>或等效文件中，然后你可以独立设置颜色。

或者，你也可以用你想要的子弹色制作一张图像，并使用list-style-image属性设置它。

小开

我建议给LI一个background-image和padding-left。list-style-image属性在跨浏览器环境中是不稳定的，添加一个额外的元素(比如span)是不必要的。所以你的代码最终看起来是这样的:

li {
background:url(../images/bullet.png) 0 0 no-repeat;
list-style:none;
padding-left:10px;
}

小开

最佳答案

最常见的做法是:

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: # EYZ0

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

小开

我使用jQuery来实现这个:

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

,用一些CSS:

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

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

小开

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

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

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

编辑:

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

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

# EYZ0

从FontAwesome 备忘单(或任何其他webfont图标)中获取代码。

i.e.:
fa-angle-right [&#xf105;]

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

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

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

提琴

小开

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

这是example。

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


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

小开

我知道这篇文章的回答有点晚了，但作为参考……

CSS

ul {
color: red;
}


li {
color: black;
}

子弹的颜色是在ul标签上定义的，然后我们切换回li颜色。

小开

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

ul li {
color: red
}


ul li span {
color: blue;
}

<ul>
<li><span>Foo</span></li>
<li><span>Bar</span></li>
<li><span>Bat</span></li>
</ul>

小开

以Lea的演示为例，这里有一种不同的制作无序列表的方法，带有边框:http://jsfiddle.net/vX4K8/7/

超文本标记语言

<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.</li>
<ul>
<li>Son</li>
<li>Of</li>
<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.</li>
</ul>
</ul>
</ul>

CSS

ul {
list-style: none;
margin: 0;
}


ul:first-child {
padding: 0;
}


li {
line-height: 180%;
border-bottom: 1px dashed #CCC;
margin-left: 14px;
text-indent: -14px;
}


li:last-child {
border: none;
}


li:before {
content: "";
border-left: 4px solid #CCC;
padding-left: 10px;
}

小开

在多行条目中使用完美缩进的Lea Verou解决方案的变体可能是这样的:

ul{
list-style: none;
position: relative;
padding: 0;
margin: 0;
}


li{
padding-left: 1.5em;
}


li:before {
position: absolute;
content: "•";
color: red;
left: 0;
}

小开

然而，另一种解决方案是使用:before伪元素和border-radius: 50%。这将适用于所有浏览器，包括ie8及以上。

使用em单元允许响应字体大小的变化。您可以通过调整jsFiddle窗口的大小来测试这一点。

ul {
list-style: none;
line-height: 1em;
font-size: 3vw;
}


ul li:before {
content: "";
line-height: 1em;
width: .5em;
height: .5em;
background-color: red;
float: left;
margin: .25em .25em 0;
border-radius: 50%;
}

< a href = " http://jsfiddle.net/HS82t/224/ " > < >强jsFiddle < /强> < / >

你甚至可以使用box-shadow来创建一些漂亮的阴影，一些用content: "• "解决方案看起来不好看的东西。

小开

我正在为这个问题添加我的解决方案。

我不想使用image，验证器会惩罚你在CSS中使用负值，所以我这样做:

ul          { list-style:none; padding:0; margin:0; }


li          { padding-left:0.75em; position:relative; }


li:before       { content:"•"; color:#e60000; position:absolute; left:0em; }

小开

这就行了。

li{
color: #fff;
}

小开

一种方法是使用li:before和content: ""，并将其样式化为inline-block元素。

下面是一个工作代码片段:

ul {
list-style-type: none; /* no default bullets */
}


ul li {
font-family: Arial;
font-size: 18px;
}


ul li:before { /* the custom styled bullets */
background-color: #14CCBB;
border-radius: 50%;
content: "";
display: inline-block;
margin-right: 10px;
margin-bottom: 2px;
height: 10px;
width: 10px;
}

<ul>
<li>Swollen joints</li>
<li>Pain in hands and knees</li>
<li>Redness around joints</li>
<li>Constant fatigue</li>
<li>Morning stiffness in joints</li>
<li>High fevers</li>
<li>Rheumatoid nodules, which develop around joints</li>
</ul>

小开

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 设置 HTML 列表 UL/LI 中的项目符号颜色, 不能使用任何图像或 span 标签

.．.没有使用任何 sprite 图像(雪碧图)或 span 标签!