Html 如何更改无序列表中点的颜色?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5839553/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I change the color of the dot in an unordered list?
提问by Marie
I want to change the color of dots in an unordered list:
我想更改无序列表中点的颜色:
<ul>
<li></li>
</ul>
Is there a way that I can do this with CSS? I can't see a property?
有没有办法用 CSS 做到这一点?看不到楼盘?
回答by BoltClock
The easiest (but rather unsemantic) way is to wrap the content in span
tags, then apply the bullet color to li
and text color to span
.
最简单(但不符合语义)的方法是将内容包装在span
标签中,然后将项目符号颜色应用于li
,将文本颜色应用于span
。
In code:
在代码中:
<ul>
<li><span>text</span></li>
<li><span>text</span></li>
<li><span>text</span></li>
</ul>
ul li {
/* Bullet color */
color: red;
list-style-type: disc;
}
ul li span {
/* Text color */
color: black;
}
If you can't modify your HTML, you can either use list-style-image
with a custom-colored dot, or use generated content (i.e. li:before
) and color it accordingly (but watch out for list bullet position problems).
如果您不能修改您的 HTML,您可以使用list-style-image
自定义颜色的点,或者使用生成的内容(即li:before
)并相应地为其着色(但要注意列表项目符号位置问题)。
Here's an example with li:before
:
ul li {
/* Text color */
color: black;
list-style-type: none;
}
ul li:before {
/* Unicode bullet symbol */
content: '22 ';
/* Bullet color */
color: red;
padding-right: 0.5em;
}
回答by ranbureand
Further developing the answer given by @BoltClock:
进一步发展@BoltClock 给出的答案:
ul li {
color: black;
list-style-type: none;
}
ul li:before {
color: red;
float: left;
margin: 0 0 0 -1em;
width: 1em;
content: '22';
}
In this way all lines of a multi-line bullet are indented properly. Beware: I've not had the chance to test it on IE yet!
通过这种方式,多行项目符号的所有行都正确缩进。当心:我还没有机会在 IE 上测试它!
回答by GGG
None of the above answers work for me, as I had content that wrapped onto multiple lines. However the solution provided by W3C is perfect: https://www.w3.org/Style/Examples/007/color-bullets.en.html
以上答案都不适合我,因为我的内容包含在多行上。然而 W3C 提供的解决方案是完美的:https: //www.w3.org/Style/Examples/007/color-bullets.en.html
In short, remove styling:
简而言之,删除样式:
ul {list-style: none}
Then add your own bullet
然后添加你自己的项目符号
li::before {
content: "?";
color: red;
display: inline-block;
width: 1em;
margin-left: -1em
}
The key points are inline-block, width and margin to position it correctly.
关键点是行内块、宽度和边距以正确定位它。
回答by Seth
You can create your own image.
您可以创建自己的图像。
li {
list-style-image: url(myImage.gif);
}
回答by Homer6
I think you have to use a graphic:
我认为您必须使用图形:
http://catcode.com/csstips/graphic_list.html
http://catcode.com/csstips/graphic_list.html
As an aside, this will also give you granular control over the bullet positioning (by using margins and image offset).
顺便说一句,这还可以让您精细地控制项目符号的位置(通过使用边距和图像偏移)。