小编典典

如何通过CSS在UL / LI html列表中设置项目符号颜色，而无需使用任何图像或跨度标签[重复]

css

想象一个简单的未排序列表，其中包含一些<li>项目。现在，我将子弹定义为通过。list- style:square;但是，如果我将<li>项目的颜色设置为，color: #F00;则所有项目都将变为红色！

虽然我只想设置方形子弹的颜色。是否有一种 优雅的方式 来定义CSS中项目符号的颜色…

…不使用任何图片图像或span标签！

HTML

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

CSS

li{
   list-style:square;
}

阅读 810

2020-05-16

共1个答案

小编典典

最常见的方法是按照以下方式进行操作：

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>

适用于所有浏览器，包括版本8及更高版本的IE。

2020-05-16