应使用css的list-style-type属性替代已废弃的html type属性，支持disc、circle、square、none等值；现代方案推荐::marker伪元素精细控制符号样式，兼容chrome 89+、firefox 89+、safari 14.1+。

如何用 CSS 修改 ul 的默认圆点符号

浏览器给 ul 默认加的实心圆点（●）不是写死的，而是由 list-style-type 控制的。改它最直接，也最安全。

• list-style-type 支持 disc（默认）、circle、square、none 等基础值，直接写在 ul 或 li 上都行
• 如果想用中文顿号、短横线或箭头，优先选 list-style-type: "、"（注意引号包裹字符串），但仅在现代浏览器生效
• 别对 ul 设置 list-style-type: none 后就忘了手动加符号——那会彻底消失，且不自动换行对齐

用 ::marker 伪元素精细控制符号样式

这是目前最灵活的方式，能单独调符号颜色、字体、大小，不影响文字本身。但注意兼容性：Safari 14.1+、Chrome 89+、Firefox 89+ 支持，旧版 Edge 不行。

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

• li::marker 是作用目标，不能写成 ul::marker
• 支持有限 CSS 属性：color、font-size、font-family（比如设成 "Segoe UI Symbol" 显示更稳的符号）
• 不能用 margin 或 padding 调整符号间距，得靠 content + white-space 配合微调
• 示例：

  li::marker { color: #2563eb; font-size: 1.1em; }

完全自定义符号时为什么推荐用 background-image 而不是 list-style-image

list-style-image 看起来更“原生”，但实际问题多：无法缩放、位置难对齐、不响应 currentColor、在高 DPI 屏上模糊。

• 改用 li 的 background-image + background-position，配合 padding-left 留出空间，控制力强得多
• 图标建议用 SVG 内联（url("data:image/svg+xml,...")）或 .svg 文件，避免 PNG 模糊
• 记得加 background-repeat: no-repeat 和 background-size: contain，否则可能拉伸变形
• 若需适配深色模式，SVG 内联写法可直接引用 currentColor，比外部图片方便

移动端列表符号错位或被截断的常见原因

不是代码写错了，往往是布局挤压导致的视觉异常。

• li 父容器用了 overflow: hidden 或 text-overflow: ellipsis，会把符号剪掉——检查是否意外继承了这些样式
• 设置了 line-height 过小（如 1），导致 ::marker 垂直居中失效，看起来像“挂”在文字上方
• 使用 flex 或 grid 布局 ul 时，li 若没设 align-items: flex-start，符号和文字基线可能不齐
• 某些安卓 WebView 对 ::marker 渲染不稳定，临时方案是回退到 background-image + 固定 padding-left

真正麻烦的不是换符号，而是换完之后在不同设备上保持一致的垂直对齐和间距。特别是混合了图标、文字、行内元素的 li，::marker 的 baseline 行为容易被忽略。

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