CSS 更改列表的项目符号颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25717340/
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
Change the bullet color of list
提问by Erma Isabel
I have a list,
我有一个清单，
<ul class="listStyle">
<li>
<strong>View :</strong> blah blah.
</li>
<li>
<strong>Edit :</strong> blah blah blah.
</li>
</ul>
I am using square bullet for list.
我正在使用方形项目符号作为列表。
.listStyle{
list-style-type: square;
}
Bullets appears in black color. Is it possible change the color of the bullet? If yes, how can i change it?
子弹以黑色出现。可以改变子弹的颜色吗？如果是，我该如何更改？
Please help, Thanks
请帮忙，谢谢
回答by Michael Robinson
Bullets take the colorproperty of the list:
子弹采用color列表的属性：
.listStyle {
color: red;
}
Note if you want your list text to be a different colour, you have to wrap it in say, a p, for example:
请注意，如果您希望列表文本具有不同的颜色，则必须将其包裹在 a 中p，例如：
.listStyle p {
color: black;
}
<ul class="listStyle">
<li>
<p><strong>View :</strong> blah blah.</p>
</li>
<li>
<p><strong>View :</strong> blah blah.</p>
</li>
</ul>
回答by Bhojendra Rauniyar
I would recommend you to use background-image instead of default list.
我建议您使用 background-image 而不是默认列表。
.listStyle {
list-style: none;
background: url(image_path.jpg) no-repeat left center;
padding-left: 30px;
width: 20px;
height: 20px;
}
Or, if you don't want to use background-image as bullet, there is an option to do it with pseudo element:
或者，如果您不想使用背景图像作为项目符号，则可以选择使用伪元素来实现：
.liststyle{
list-style: none;
margin: 0;
padding: 0;
}
.liststyle:before {
content: "? ";
color: red; /* or whatever color you prefer */
font-size: 20px;/* or whatever the bullet size you prefer */
}
回答by user3074446
You have to use image
你必须使用图像
.listStyle {
list-style: none;
background: url(bullet.jpg) no-repeat left center;
padding-left: 40px;
}
