当前位置: 首页 > 面试题库 >

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

白通
2023-03-14
问题内容

想象一个简单的未排序列表,其中包含一些<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;
}

问题答案:

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

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。



 类似资料:
  • 我正在使用mpandroid图表库创建饼图。 我想格式化饼图上的文本标签,但我不知道如何做到这一点 但是,它只改变数据的值,而不是标签。此外,我想成为饼图中的标签。我还尝试使用以下代码, 但是,它不起作用。 我的代码如下: 简而言之,我想做的就是 更改饼图中的标签颜色(从白色变为黑色) 防止标签超出饼图。(如图中所示的剩余划痕) 有人能帮我吗? 我还尝试了以下链接中提到的这些解决方案。 链接1链接

  • 我正在使用ColorAdjust对图像应用不同的颜色。问题是颜色不是我想要的。如果我使用绿色作为目标色,我得到一个粉红色的球。 问题 如何计算ColorAdjust的色调值以匹配给定的目标颜色?或者有没有更好的方法来给图像着色?我不能使用形状本身,因为使用ImageView比使用形状快得多。 解决方案 使用RGB滑块和José的解决方案的扩展版本,适用于那些想玩弄它的人: 或解决方案的简短版本:

  • 问题内容: 我想知道是否可以更改列表中项目符号的颜色。 我有一个这样的清单: 对我来说,不可能在li中插入任何内容,例如“ span”或“ p”。那么,我可以以某种巧妙的方式更改项目符号的颜色,但不能更改文本的颜色吗? 问题答案: 如果可以使用图像,则可以执行此操作。如果没有图像,您将只能更改项目符号的颜色,而不能更改文本的颜色。 使用图像 不使用图像 然后,您必须编辑HTML标记,并在列表中包括

  • 我对java编程还是相当陌生的,很难理解一些概念,尤其是设置单元格值。(如果有人能用外行的话来解释这一点,那就太棒了!) 这是我的问题。。。 我有一个tableview,其中加载了一个来自derby数据库中数据表的。将数据添加到表中的for循环是我从在线查看中学到的,它对我来说确实有效。我想更进一步,所以这是我的挑战。。。 将有如下示例:第1行[toy,high等]第2行[box,Middle等]

  • 问题内容: 我所希望的是能够将列表中项目符号的颜色更改为浅灰色。它默认为黑色,我不知道如何更改它。 我知道我只能使用图像;如果可以的话,我宁愿不这样做。 问题答案: 项目符号从文本中获取颜色。因此,如果您要使用不同于列表中文本颜色的项目符号,则必须添加一些标记。 将列表文本换成跨度: 然后稍微修改您的样式规则:

  • 问题内容: 给定透明的PNG以白色显示简单形状,是否有可能通过CSS更改其颜色?某种覆盖还是什么? 问题答案: 您可以将筛选器与和一起使用:筛选器相对于浏览器而言是较新的,但根据以下CanIUse表,超过90%的浏览器均支持它们 您可以将图像更改为灰度,棕褐色等(请看示例)。 因此,您现在可以使用滤镜更改PNG文件的颜色。