列表项前的圆点无法通过直接设置color改变颜色，因其为浏览器渲染的装饰性图形；应使用list-style: none配合li::before伪元素自定义符号并单独设色。
列表项前的圆点不是独立元素，不能直接用 color 改
很多人试过给 <ul></ul> 或 <li> 加 color: red，发现小圆点颜色没变——这是因为默认的项目符号（bullets）是浏览器渲染的装饰性图形，不继承文本颜色。它只在某些情况下跟随 color，但不可靠，尤其在 Chrome/Firefox 中行为不一致。
用 list-style-type + list-style-image 不够灵活
改用图片符号（list-style-image: url(...)）能控制颜色，但要额外切图、适配缩放、处理高 DPI 屏幕，且无法响应式变色。纯 CSS 方案更轻量：
-
list-style: none关掉默认圆点 - 用
::before伪元素在每个<li>前插入自定义内容（比如 ●） - 给这个伪元素单独设
color或background
CSS 伪元素方案：稳定、可配色、无需图片
实操代码如下（支持所有现代浏览器）：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
ul.custom-bullets {
list-style: none;
padding-left: 0;
}
ul.custom-bullets li {
position: relative;
padding-left: 24px;
}
ul.custom-bullets li::before {
content: "●";
color: #e74c3c; /* 这里改圆点颜色 */
position: absolute;
left: 0;
top: 0.2em;
}
注意几个关键点：
-
top: 0.2em是为了垂直对齐文字基线，不同字体可能需要微调 - 如果要用空心圆或箭头，把
content换成"○"或"→"即可 - 想加背景色圆点？把
color换成background+border-radius+width/height，再用display: inline-block
别忘了兼容旧版 Safari 和 IE 的坑
IE 11 及更早版本不支持 ::before 在 <li> 上生效（会渲染在 <ul></ul> 外）。如果必须支持 IE，得退回到 list-style-image 或用 JS 插入 <span></span> 元素。但绝大多数项目现在可忽略 IE —— 真要兼容，优先测试 Safari 12–13，它们对 position: absolute 在 li::before 中的支持偶尔有偏移问题。
真正麻烦的是当列表嵌套时，子 <ul></ul> 里的 li 容易被父级样式污染，记得用更具体的选择器（比如 ul ul li::before 单独重置）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
