li::marker { color: red; }没反应主因是三个前提至少一个失效：ul/li设list-style:none关闭渲染通道、li的display非list-item、或浏览器不支持（safari15.3及更早等静默忽略）；content仅支持字符串或counter()，属性仅color/font-size等少数有效。

为什么li::marker { color: red; }写了没反应

不是代码写错，而是三个前提至少崩了一个：ul或li上设了list-style: none（直接关闭::marker通道）、li的计算display值不是list-item（比如被flex容器或display: block覆盖）、浏览器不支持（Safari 15.3 及更早、iOS 15.2 及更早微信 X5 内核会静默忽略整条规则）。Chrome 86+、Firefox 68+、Safari 15.4+ 才真正识别，且 DevTools 里看不到::marker面板就说明它根本没加载。

content怎么写才不翻车

content是唯一能“换掉”圆点的出口，但语法极敏感，错一个字符就失效：

• ✅ 正确：content: "• ";（双引号内末尾带空格，避免文字粘连）
• ✅ 更稳妥：content: "\2022";（Unicode 实心圆，无字体依赖）
• ❌ 错误：content: "•" ;（分号前多空格）、content: '•'（单引号在某些构建工具中被删）、content: url(./dot.svg)（url()完全不支持）
• emoji 如 "→ " 在 Firefox 中宽度不均，可加 font-size: 0.9em 微调对齐

::marker能设什么、不能设什么

它不是普通伪元素，浏览器只放行极窄的属性子集，其他一律静默丢弃（不报错，也不生效）：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• ✅ 安全可用：color（最稳）、font-size（Chrome 100+/Firefox 98+ 稳定，Safari 16.4+ 有限支持）、font简写（如 font: bold 1.2em sans-serif）、text-align（仅对多字符 content 生效）
• ❌ 一律无效：margin、padding、background、border、transform、display、line-height、vertical-align
• ⚠️ 小心使用：font-weight 在 Safari 16.4+ 才支持；font-family 单独写无效，必须包在 font 简写里

想用 SVG 或图标圆点？别碰 ::marker

::marker 不支持 background-image、url() 或内联 SVG，content 也只接受字符串或 counter()，不能插图片。所以 SVG 圆点、箭头、勾选等复杂符号，必须走标准降级路径：

• 先加 list-none 清除默认样式，否则 Safari 会叠出两个符号
• 用 li::before：设 display: inline-block + vertical-align: text-bottom 保证基线对齐
• 内容用 data URL 编码的 SVG，或 Unicode 字符配合 font-size 控制尺寸
• 间距靠 margin-right 或 text-indent 调，别指望 ::marker 的 padding

真正可控的路径永远是：list-none + ::marker 或 ::before 显式接管。别试图让 list-disc 响应 marker:text-red-500——它底层是操作系统级“黑盒符号”，CSS 进不去。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！