为了账号安全,请及时绑定邮箱和手机立即绑定

如何在不使用任何图像或跨标记的情况下,通过CSS在UL/Li html列表中设置项目颜色

/ 猿问

如何在不使用任何图像或跨标记的情况下,通过CSS在UL/Li html列表中设置项目颜色

富国沪深 2019-07-22 14:40:25

如何在不使用任何图像或跨标记的情况下,通过CSS在UL/Li html列表中设置项目颜色

想象一个简单的未排序列表<li>物品。现在,我已经定义了子弹是方形的list-style:square;但是,如果我设置了<li>color: #F00;然后一切变成红色!

而我只想设置正方形子弹的颜色。有没有雅道要在CSS中定义子弹的颜色.

.不用任何精灵图像或跨度标签!

HTML

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

CSS

li{
   list-style:square;}


查看完整描述

3 回答

?
梵蒂冈之花

最常见的方法是这样做:

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/

将在所有浏览器中工作,包括版本8和更高版本的IE。


查看完整回答
反对 回复 2019-07-22

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信