优先用 li::marker 控制颜色与大小，现代浏览器支持 color 和 font-size；老浏览器需用 list-style: none + ::before 兜底。
li 里用 标签改符号颜色根本无效
直接在 里套 或写内联 style="color:red"，只能影响文字颜色，对默认圆点、数字等符号完全没作用。浏览器把符号当独立装饰元素渲染，不继承文本样式。
list-style-type 本身不支持颜色和大小控制
list-style-type 只决定符号“类型”，比如 disc、square、lower-alpha，它不是样式属性，不能设 color 或 font-size。写成这样：
li { list-style-type: disc; color: red; font-size: 18px; }
→ 文字变红变大，但圆点还是灰色、原始尺寸。
现代方案：优先用 li::marker 控制颜色与大小
这是最干净、语义最正的解法，但要注意兼容性和可用属性：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
li::marker { color: #e74c3c; font-size: 1.3em; }在 Chrome 86+、Firefox 68+、Safari 15.4+（含 iOS）生效 - 旧版 Safari（15.3 及更早）、Chrome 80、所有 IE 版本会静默忽略整个规则，不报错也不渲染
- 仅
color是强制支持；font-size和font-family在主流现代浏览器稳定，但background、margin、padding全部无效 - 如果 DevTools 里看到
li::marker规则被划掉（strikethrough），先检查是否被父级color覆盖，或是否用了list-style-image（它会禁用::marker）
兜底方案：用 list-style: none + ::before 完全接管
当需要兼容老浏览器，或要加图标、动画、背景色等 ::marker 不支持的效果时，这个方案最可控：
ol, ul { list-style: none; }
li { position: relative; padding-left: 1.5em; }
li::before {
content: "•";
color: #9b59b6;
font-size: 1.2em;
position: absolute;
left: 0;
top: 0.1em;
}
关键点：
-
content可填任意字符、emoji（如"→"、"✓"）或用counter()实现自定义编号 - 必须设
position: absolute+left手动定位，否则容易和文字重叠 - 若用于
counter-reset/counter-increment配合counter() - 这个方案在所有浏览器都可靠，但多了一层 DOM 模拟逻辑，维护成本略高
真正容易被忽略的是：符号样式不是“文字的一部分”，而是浏览器生成的独立渲染单元。想让它响应 CSS，就得用对钩子——::marker 是专为此设计的，但它的能力边界比直觉窄；而硬塞 或指望 color 继承，只会卡在“看起来写了，实际没变”的调试循环里。
