it-swarm.cn

有没有一种简单的方法来改变列表中子弹的颜色?

我想要的就是能够将列表中的子弹颜色更改为浅灰色。它默认为黑色,我无法弄清楚如何更改它。

我知道我可以使用图像;如果我能帮助它,我宁愿不这样做。

83
Dave Haynes

子弹从文本中获取颜色。因此,如果您希望使用与列表中的文本不同的颜色项目符号,则必须添加一些标记。

在一个范围中包装列表文本:

<ul>
  <li><span>item #1</span></li>
  <li><span>item #2</span></li>
  <li><span>item #3</span></li>
</ul>

然后稍微修改您的样式规则:

li {
  color: red; /* bullet color */
}
li span {
  color: black; /* text color */
}
156
Prestaul

我在没有添加标记的情况下管理了这个,而是使用li:before。这显然具有:before的所有限制(没有旧的IE支持),但在经过一些非常有限的测试之后,它似乎适用于IE8,Firefox和Chrome。它在我们的控制器环境中工作,想知道是否有人可以检查这一点。子弹样式也受到unicode内容的限制。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style type="text/css">
    li {
      list-style: none;
    }

    li:before {
      /* For a round bullet */
      content:'\2022';
      /* For a square bullet */
      /*content:'\25A0';*/
      display: block;
      position: relative;
      max-width: 0px;
      max-height: 0px;
      left: -10px;
      top: -0px;
      color: green;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <ul>
    <li>foo</li>
    <li>bar</li>
  </ul>
</body>
</html>
44
Marc

这在2008年是不可能的,但它很快就会成为可能(希望如此)!

根据 W3C CSS3规范 ,您可以完全控制带有::marker伪元素的列表项之前生成的任何数字,字形或其他符号。要将此应用于投票最多的答案解决方案:

<ul>
  <li>item #1</li>
  <li>item #2</li>
  <li>item #3</li>
</ul>

li::marker {
  color: red; /* bullet color */
}
li {
  color: black /* text color */
}

JSFiddle示例

但请注意, 截至2016年7月 ,此解决方案只是W3C工作草案的一部分,但在任何主流浏览器中都不起作用。

如果您需要此功能,请执行以下操作:

16
Supuhstar
<ul>
  <li style="color: #888;"><span style="color: #000">test</span></li>
</ul>

这种方法的一个大问题是额外的标记。 (span标签)

5
Jonathan Arkell

只需在图形程序中执行一个项目符号并使用list-style-image

ul {
  list-style-image:url('gray-bullet.gif');
}
2
ghr

你好,也许这个答案很晚,但是要做到这一点是正确的。

好的事实是,您必须指定一个内部标记,以使LIst文本处于通常的黑色(或者您希望获得它)。但你也可以使用CSS重新定义任何TAGS和内部标签。因此,最好的方法是使用SHORTER标记进行重新定义

使用此CSS定义:

li { color: red; }
li b { color: black; font_weight: normal; }
.c1 { color: red; }
.c2 { color: blue; }
.c3 { color: green; }

这个HTML代码:

<ul>
<li><b>Text 1</b></li>
<li><b>Text 2</b></li>
<li><b>Text 3</b></li>
</ul>

你得到了所需的结果。您还可以使每张光盘的颜色不同:

<ul>
    <li class="c1"><b>Text 1</b></li>
    <li class="c2"><b>Text 2</b></li>
    <li class="c3"><b>Text 3</b></li>
 </ul>
2
Dragnovich

使用span(或其他元素)将列表项中的文本换行,并将项目符号颜色应用于列表项,将文本颜色应用于span。

0
user4903

如果我们为每个元素设置颜色,例如:我现在添加了一些边距。

<article class="event-item">
    <p>Black text here</p>
</article>

.event-item{
    list-style-type: disc;
    display: list-item;
    color: #ff6f9a;
     margin-left: 25px;
}
.event-item p {
    margin: 0;
    color: initial;
}
0
Mohammed

根据 W3C规范

列表属性...不允许作者为列表标记指定不同的样式(颜色,字体,对齐等)...

但是上面列表中的span的想法应该可以正常工作!

0
Aeon

如果你有很多页面而不需要去编辑自己的标记,你可以使用Jquery。

这是一个简单的例子:

$("li").each(function(){
var content = $(this).html();
var myDiv = $("<div />")
myDiv.css("color", "red"); //color of text.
myDiv.html(content);
$(this).html(myDiv).css("color", "yellow"); //color of bullet
});
0
alaasdk
<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>
0
User

对于2008年的一个问题,我想我可能会添加一个关于如何更改列表中项目符号颜色的最新和最新答案。

如果您愿意使用外部库, Font Awesome为您提供可伸缩的矢量图标 ,当与 Bootstrap的帮助类 (例如text-success)结合使用时,您可以制作一些非常酷且可自定义的列表。

我已经扩展了 字体真棒列表示例页面 下面的摘录:

使用fa-ulfa-li可以轻松替换无序列表中的默认项目符号。

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

<ul class="fa-ul">
  <li><i class="fa-li fa fa-circle"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square text-success"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin text-primary"></i>as bullets</li>
  <li><i class="fa-li fa fa-square text-danger"></i>in lists</li>
</ul>

Font Awesome (主要)支持IE8 ,如果你使用 旧版本3.2.1 只支持I​​E7。

0
eggy