如何利用CSS markers属性自定义移动端列表的序号样式？-css教程-PHP中文网

markers 不是标准 css 属性，所有主流浏览器均不支持；实际应使用 ::marker 伪元素配合 counter() 实现列表序号定制，并通过 @supports 回退兼容旧版 safari。

如何利用css markers属性自定义移动端列表的序号样式？

markers 不是标准 CSS 属性，目前（截至 2024 年）所有主流浏览器均不支持该属性。你在文档或教程里看到的 markers 很可能是混淆了 CSS Lists 模块草案中的早期命名，或是误将 SVG 的 <marker></marker> 元素当成了 CSS 属性。

为什么找不到 `markers` 这个 CSS 属性？

CSS 规范中从未定义过名为 markers 的可继承或可设置的 CSS 属性。W3C 的 CSS Lists and Counters Module Level 3 草案曾讨论过 marker（单数）作为伪元素选择器的扩展思路，但最终未被采纳；现行稳定方案仍基于 ::marker 伪元素（2021 年起逐步支持）和 counter- 系列函数。

常见误判来源包括：

把 SVG 中的 <marker></marker> 元素当作 CSS 属性（它只用于 <path></path> 或 <line></line> 的箭头装饰）
将 PostCSS 插件或某 UI 框架的私有语法当成了原生 CSS
搜索时被过时博客或 AI 生成内容误导，引用了已撤稿的草案术语

移动端列表序号自定义的可行方案：用 `::marker` + `counter()`

真正可用、兼容性良好（Chrome 86+、Safari 15.4+、Firefox 89+）的方式是组合使用 counter-reset、counter-increment 和 ::marker 伪元素。它能精确控制序号颜色、字体大小、间距，且天然适配响应式。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

实操要点：

必须为 <ol></ol> 设置 list-style: none，否则原生序号与自定义会重叠
::marker 只作用于 <li> 的序号部分，不能选中整个 <li> 内容
移动端需额外加 text-align: start 防止 RTL 文本干扰对齐
若要支持 iOS 15.2 以下 Safari，需回退到 ::before + content: counter(...) 方案

最小可用示例：

ol {
  list-style: none;
  counter-reset: step;
}
ol li {
  counter-increment: step;
}
ol li::marker {
  color: #007aff;
  font-weight: 600;
}
/* iOS 15.2- 回退 */
@supports not selector(::marker) {
  ol li::before {
    content: counter(step) ". ";
    color: #007aff;
    font-weight: 600;
    margin-right: 8px;
  }
}

容易踩的坑：字体缩放、touch 区域和语义可访问性

在移动端，光改样式不够，还要考虑实际交互和读屏体验：

::marker 无法单独设置 font-size 在部分 Android WebView 中失效（建议统一用 em 或 rem 单位，并在 <li> 上设基准字号）
序号太小会导致 touch 目标不足，WCAG 要求最小触控区域 ≥ 44×44px —— 建议给 <li> 设 min-height: 44px，而非只调序号大小
用 counter() 生成的序号默认无语义，读屏器可能跳过；若需保障可访问性，保留原生 <ol></ol> 结构，仅视觉隐藏原生序号（list-style-position: inside + text-indent 调整）比完全移除更稳妥