跳转到主内容
趣航编程网 - 趣学编程,启航技术之路!

HTML中ol标签的type属性设置序号样式

应优先使用 CSS 的 list-style-type 而非 HTML 的 type 属性,因其更可靠、语义清晰、支持更多编号类型,且不干扰可访问性;type 仅支持五种硬编码值,无法实现前缀、零填充、图标等高级功能,且在与 CSS 冲突时被覆盖。 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更 下载
ol
标签的
type
属性能快速切换基础序号类型,但它不是首选方案——CSS 的
list-style-type
更可靠、语义更清晰、支持更多值,且不会干扰可访问性。 用
type
属性只能设五种基础类型
type
是 HTML 原生属性,只接受硬编码的字符串值:
"1"
、
"a"
、
"A"
、
"i"
、
"I"
。 它不能实现前缀(如“Step 1”)、零填充(如“01”)、图标、多级嵌套编号,也不支持希腊字母、亚美尼亚数字等扩展类型。 常见误用是写成
——这会完全失效,浏览器直接忽略。
type
和
list-style-type
冲突时谁赢? CSS 的
list-style-type
优先级高于 HTML
type
属性。 例如:
  1. First
搭配 CSS:
ol { list-style-type: lower-roman; }
最终显示的是小写罗马数字(i, ii, iii),不是大写字母(A, B, C)。 这意味着:一旦你用 CSS 控制样式,
type
属性就形同虚设;若两者混用又没注意覆盖关系,容易出现预期外的回退行为(比如在禁用 CSS 的环境里才看到
type
效果)。 为什么建议优先用
list-style-type
而非
type
?
list-style-type
支持更多值:除
type
的五种外,还能用
decimal-leading-zero
、
upper-greek
、
georgian
、
cjk-ideographic
等(兼容性需查 Can I Use) 它属于样式层,符合 HTML 语义与表现分离原则 ——
ol
表示“有序”,具体怎么编号交给 CSS 可通过媒体查询动态切换,比如移动端用
decimal
,桌面端用
upper-roman
无障碍工具(如屏幕阅读器)更倾向依赖 CSS 渲染后的视觉序号,而非原始
type
值 真正需要自定义序号时,
type
完全无用 比如要生成 “Chapter-1”、“Chapter-2”,或跳过某项编号,或嵌套为 “1.1”、“1.2.1”,
type
属性连边都沾不上。 必须用 CSS 计数器:
ol.chapter { counter-reset: chapter; } ol.chapter li { counter-increment: chapter; } ol.chapter li::before { content: "Chapter-" counter(chapter) " "; }
这里
counter-reset
和
counter-increment
是强制前提,
type
对它们毫无影响。 别指望靠改
type="1"
来“配合”计数器 —— 它只会增加冗余,还可能在某些旧浏览器中引发渲染冲突。 真正容易被忽略的点是:现代项目里
type
属性几乎只剩向后兼容价值。如果你正写新页面,直接删掉所有
type
,统一用
list-style-type
或计数器,反而更干净、更可控。

相关文章