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

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

/ 猿问

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

慕哥347897 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
?
慕雪6442864

浏览前一段时间,发现了这个网站,你试过这个选择吗?

li{
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg==");}

听起来很难,但是您可以制作自己的png图像/模式。这里,然后复制/粘贴您的代码并自定义您的子=)仍然优雅?

编辑:

遵循@Lea-verou的另一个答案,并应用这种外部资源增强的哲学,我找到了另一个解决方案:

  1. 在头脑中嵌入Web字体图标库的样式表,在本例中,字体很好:

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

  1. 从FentAwome那里取一段代码

    小抄

    (或任何其他网页字体图标)。
i.e.:fa-angle-right [&#xf105;]

用f的最后一部分.。后面跟着这样的数字,然后是font-family也是:

li:before {
    content: "\f105";
    font-family: FontAwesome;
    color: red; /* or whatever color you prefer */
    margin-right: 4px;}

就这样!现在你也有了定制的弹出技巧=)

小提琴


查看完整回答
反对 回复 2019-07-22
?
素胚勾勒不出你

的当前规范。CSS 3清单模块指定::marker伪元这完全是你想做的事情;FF已经被测试为不支持。::marker我怀疑无论是Safari还是Opera都有。当然,IE不支持它。

所以现在,唯一能做到这一点的方法就是使用list-style-image.

我想你可以把li带着span然后你可以设定每一种颜色,但这在我看来有点麻烦。


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

添加回答

回复

举报

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