HTML中ul标签type属性废弃后怎么用CSS list-style-image自定义列表圆点为小图标-html教程-PHP中文网

最推荐使用::marker伪元素替换默认项目符号，因其支持svg内联、可缩放和着色；兼容性要求高时用background-image+padding-left；需交互效果则选::before；list-style-image因功能受限已不推荐。

html中ul标签type属性废弃后怎么用css list-style-image自定义列表圆点为小图标

ul 的 type 属性已失效，别再写了

HTML5 中 type 属性在 ul 和 ol 上已被废弃，浏览器基本忽略它（比如 <ul type="square"></ul> 不起作用）。想换圆点图标，必须用 CSS 控制，核心是 list-style-image 或更推荐的 list-style 复合写法。

list-style-image 路径和尺寸要小心

直接用 list-style-image 时，图标的渲染效果很依赖路径正确性和原始尺寸：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

路径必须相对于 CSS 文件位置（不是 HTML），用相对路径时建议统一放在 assets/icons/ 下，例如 list-style-image: url(../assets/icons/check.svg);
图标默认按原尺寸渲染，若太大或太小会挤压行高或留白异常；建议 SVG 图标控制在 12px × 12px 左右，或用 background-size 配合伪元素方案更可控
不支持设置图标颜色（SVG 内联色固定），需要动态换色时得用 mask + background-color 或改用伪元素

更稳妥的做法：用 ::marker 或伪元素替代

::marker 是现代方案（Chrome 86+、Firefox 89+、Safari 15.4+ 支持），但 IE 和旧 Safari 完全不支持；兼容性要求高时，用 ::before 更稳：

ul.custom-bullets li {
  list-style: none;
  position: relative;
}
ul.custom-bullets li::before {
  content: "";
  position: absolute;
  left: -1.2em;
  top: 0.4em;
  width: 0.6em;
  height: 0.6em;
  background: url(../assets/icons/dot-blue.svg) no-repeat center / contain;
}

left 和 top 值需根据字体大小微调，em 单位比 px 更适配缩放
用 background 而非 content: url(...)，避免部分浏览器对 URL 的解析差异
若图标需响应式缩放，优先选 inline SVG 或用 mask 配合纯色背景

遇到 list-style-image 不显示？先查这三处

常见静默失败原因不是代码写错，而是环境或加载细节问题：

检查浏览器开发者工具 Network 标签页，确认图标资源返回 200，不是 404 或 mime type 错误（如 SVG 被当成 text/plain）
CSS 中若同时写了 list-style-type（如 list-style-type: disc），它会覆盖 list-style-image —— 必须显式设为 none
某些 CSS 重置库（如 normalize.css）会强制 list-style: none，需在自定义样式后声明，或提高选择器权重