ol标签type属性合法取值仅有5个:”1“、”a“、”A“、”i“、”I“,分别对应阿拉伯数字、小写/大写字母、小写/大写罗马数字;其他任何值(如”lower-alpha“)均被浏览器忽略。

ol 标签的 type 属性只能设成五个固定字符串值,改它没用——除非你明确只要最简陋的序号切换,且不写任何 CSS。
直接改 type 属性的合法取值有哪些
HTML 规范只允许这五种:"1"、"a"、"A"、"i"、"I"。其他任何写法(比如 "lower-alpha"、"decimal-leading-zero"、"roman")浏览器会直接忽略,连警告都不抛。
常见错误包括:
- 写成
<ol type="lower-roman"></ol>—— 无效,退化为默认"1" - 混淆大小写,比如
type="a"和type="A"看似只是大小写差异,但实际渲染完全不同(a b c vs A B C) - 误以为
type="i"能生成带前缀的 “Step i”,其实它只输出纯罗马数字i ii iii,无前缀、无空格、不可定制
type 和 list-style-type 冲突时谁生效
CSS 的 list-style-type 永远覆盖 HTML 的 type 属性。哪怕你写了 <ol type="A"></ol>,只要 CSS 中有 ol { list-style-type: lower-greek; },最终显示的就是 α β γ,不是 A B C。
立即学习“前端免费学习笔记(深入)”;
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件(幻灯片风格)。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本,并且希望生成演示用的 HTML 时触发。支持任意内容来源:iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区,并通过企微直接发送给用户。触发词示例:帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
这意味着:
- 一旦项目里用了 CSS 控制列表样式,
type就彻底失效,删掉更干净 - 如果在禁用 CSS 的环境(如某些邮件客户端、终端浏览器、无障碍阅读器降级模式)下测试,
type才会“露脸”——但此时你根本没法控制字体、间距、颜色等基础表现 - 混用两者却不检查覆盖关系,容易导致开发时看到一种效果,用户实际看到另一种(尤其跨设备/跨 UA 时)
真正要自定义序号时,type 完全没用
比如你需要 “Section 1”、“Chapter-02”、“2.1.3”,或者跳过某项编号、嵌套多级自动递进,type 连边都沾不上。必须用 CSS 计数器:
ol.section {
counter-reset: section;
}
ol.section li {
counter-increment: section;
}
ol.section li::before {
content: "Section " counter(section) " ";
}
注意点:
-
counter-reset和counter-increment是强制前提,type对它们零影响 - 不要试图用
type="1"配合计数器——冗余且可能在旧版 Safari 或 IE 兼容模式中引发渲染错位 - 嵌套编号(如 1 → 1.1 → 1.1.1)得靠
counters()函数,type压根不参与解析层级
复杂点在于:很多人改完 type 看不到效果,第一反应是“是不是写错了”,其实真正该查的是有没有 CSS 覆盖、是否在禁用样式的上下文中运行、以及是否误把语义当样式用了——ol 的本质是表达“有序”,不是“我要显示大写罗马字”。


















