本文翻译自：How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [duplicate]

This question already has an answer here: 这个问题在这里已有答案：

Change bullets color of an HTML list without using span 12 answers 更改HTML列表的项目符号颜色，而不使用跨度 12答案

Imagine a simple unsorted list with some <li> items. 想象一下带有一些<li>项的简单未排序列表。 Now, I have defined the bullets to be square shaped via list-style:square; 现在，我已经通过list-style:square;定义子弹为方形list-style:square; However, if I set the color of the <li> items with color: #F00; 但是，如果我用颜色设置<li>项目的color: #F00; then everything becomes red! 一切都变红了！

While I only want to set the color of the square bullets. 虽然我只想设置方形子弹的颜色。 Is there an elegant way to define the color of the bullets in CSS... 是否有一种优雅的方式来定义CSS中子弹的颜色......

...without using any sprite images nor span tags! ...不使用任何精灵图像也不使用span标签！

HTML HTML

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

CSS CSS

li{list-style:square;
}

#1楼

参考：https://stackoom.com/question/MGUy/如何在不使用任何图像或跨度标签的情况下通过CSS在UL-LI-html列表中设置子弹颜色-复制

#2楼

browsing sometime ago, found this site, have you tried this alternative? 浏览前一段时间，发现这个网站，你试过这个替代方案吗？

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

sounds hard, but you can make your own png image/pattern here , then copy/paste your code and customize your bullets =) stills elegant? 听起来很难，但你可以在这里制作自己的png图像/模式，然后复制/粘贴你的代码并自定义你的子弹=）仍然优雅？

EDIT: 编辑：

following the idea of @lea-verou on the other answer and applying this philosophy of outside sources enhancement I've come to this other solution: 按照@ lea-verou关于另一个答案的想法并应用这种外部源代码增强的理念，我来到另一个解决方案：

embed in your head the stylesheet of the Webfont icons Library, in this case Font Awesome: 将Webfont图标库的样式表嵌入您的脑海中，在本例中为Font Awesome：

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

take a code from FontAwesome cheatsheet (or any other webfont icons). 从FontAwesome cheatsheet （或任何其他webfont图标）获取代码。

 ie: fa-angle-right [&#xf105;]

and use the last part of f... followed by a number like this, with the font-family too: 并使用f的最后一部分...后跟一个这样的数字，也使用font-family ：

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

and that's it! 就是这样！ now you have custom bullet tips too =) 现在你也有自定义项目符号提示=）

fiddle 小提琴

#3楼

I tried this and things got weird for me. 我试过这个，事情对我来说很奇怪。 (css stopped working after the :after {content: "";} part of this tutorial. I found you can color the bullets by just using color:#ddd; on the li item itself. （CSS停止后的工作:after {content: "";} ，部分本教程中，我发现，你可以通过只使用颜色子弹color:#ddd;在li项目本身。

Here's an example . 这是一个例子。

li{color:#ff0000;    list-style:square;
}
a {text-decoration: none;color:#00ff00;
}a:hover {background-color: #ddd;
}

#4楼

I know it's a bit of a late answer for this post, but for reference... 我知道这篇文章有点迟到，但供参考......

CSS CSS

ul {color: red;
}li {color: black;
}

The bullet colour is defined on the ul tag and then we switch the li colour back. 子弹颜色在ul标签上定义，然后我们将li颜色切换回来。

#5楼

I simply solve this problem like this, which should work in all browsers: 我只是像这样解决这个问题，它应该适用于所有浏览器：

HTML: HTML：

<ul><li><span>Foo</span></li><li><span>Bar</span></li><li><span>Bat</span></li>
</ul>

CSS: CSS：

ul li{color: red
}ul li span{color: blue;
}

#6楼

Taking Lea's demo, here's a different way of making unordered lists, with borders: http://jsfiddle.net/vX4K8/7/ 以Lea的演示为例，这是一种制作无序列表的不同方式，带有边框： http ： //jsfiddle.net/vX4K8/7/

HTML HTML

<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.</li><ul><li>Son</li><li>Of</li><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.</li></ul></ul>
</ul>

CSS CSS

ul {
list-style: none;
margin: 0;
}ul:first-child {padding: 0;
}li {line-height: 180%;border-bottom: 1px dashed #CCC;margin-left: 14px;text-indent: -14px;
}li:last-child {border: none;
}li:before {content: "";border-left: 4px solid #CCC;padding-left: 10px;
}

如何在不使用任何图像或跨度标签的情况下通过CSS在UL / LI html列表中设置子弹颜色[复制]相关推荐

python使用openCV加载图像、并将BGR格式转换成HSV格式、定义HSV格式中需要分离颜色的掩码(掩模)区间（mask）、并使用mask信息进行颜色分离、BGR格式的图像转化为RGB、并可视化
python使用openCV加载图像.并将BGR格式转换成HSV格式.定义HSV格式中需要分离颜色的掩码(掩模)区间(mask).并使用mask信息进行颜色分离.将BGR格式的图像转化为RGB.可视化 ...
pptx文件无法读取_如何在未安装Office的情况下查看PPTX，DOCX或XLSX文件中的图像...
pptx文件无法读取 There's nothing more frustrating than finally getting the screenshot or image you asked f ...
java为什么删除jpg删不掉_java-如何在不损失质量的情况下从图像(JPG)删除元数据？...
我已经在Stackoverflow上发现了这个几乎相似的问题: 但是,当我使用上述方法时,保存的图像将被压缩.有什么办法可以在不压缩图像的情况下删除元数据?我的Java程序中可以使用任何库吗? 解决方 ...
python使用matplotlib可视化、为可视化图像添加标题（title）、自定义标题的字体格式、字体大小、字体颜色等
python使用matplotlib可视化.为可视化图像添加标题(title).自定义标题的字体格式.字体大小.字体颜色等目录
python使用matplotlib可视化、为可视化图像添加图例（legend）、自定义图例的字体格式、字体大小、字体颜色等
python使用matplotlib可视化.为可视化图像添加图例(legend).自定义图例的字体格式.字体大小.字体颜色等目录
R语言ggplot2可视化：jupyter中设置全局图像大小、jupyter中自定义单个ggplot2图像结果的大小
R语言ggplot2可视化:jupyter中设置全局图像大小.jupyter中自定义单个ggplot2图像结果的大小目录
怎样在不处理的情况下在ABBYY FineReader中添加图像
2019独角兽企业重金招聘Python工程师标准>>> 可使用快速扫描窗口中的快速打开.扫描并保存为图像或任务自动化任务在没有进行预处理和 OCR 的ABBYY FineReader ...
ITK:在图像上叠加标签图
ITK:在图像上叠加标签图内容提要输出结果 C++实现代码内容提要在图像上覆盖LabelMap. 输出结果 C++实现代码 #include "itkBinaryImageToLab ...
ITK:在没有写访问权的情况下迭代图像中的区域
ITK:在没有写访问权的情况下迭代图像中的区域内容提要输出结果输入输出 C++实现代码内容提要遍历图像的某个区域(无写访问权限). 输出结果输入输出 255 255 255 255 2 ...

如何在不使用任何图像或跨度标签的情况下通过CSS在UL / LI html列表中设置子弹颜色[复制]

...without using any sprite images nor span tags! ...不使用任何精灵图像也不使用span标签！

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

如何在不使用任何图像或跨度标签的情况下通过CSS在UL / LI html列表中设置子弹颜色[复制]相关推荐

最新文章

热门文章