每次写列表符号都要靠 emoji 或者专门声明一个 @counter-style——今天 CSS 用一个函数把它原生化了

每次在 HTML 里写有序列表，你有没有遇到过这些情况：想用 ★★★ 而不只是 1. 2. 3.，结果去网上搜了一圈 emoji 符号；或者项目里只有一处需要特殊列表样式，却要在 CSS 里写一整块 @counter-style 规则；又或者接手别人的代码，看到 ul { list-style-type: custom-counter; } 然后在文件顶部翻了半天才找到对应的 @counter-style 定义。这些都是因为 CSS 一直缺少一种「用完即弃」的列表符号写法。Chrome 154 给这个问题带来了原生解法：CSS symbols() 函数。一个函数，替代一整块规则。symbols() 是 CSS Counter Styles Level 3 规范里定义的函数，它的作用是让你直接在 list-style（以及 list-style-type、counter() 等属性）里内联定义计数器样式，不需要单独声明一个 @counter-style 规则。最基本的用法是这样的：ol { list-style: symbols(cyclic “❶” “❷” “❸”); } 效果：列表会依次显示 ❶ ❷ ❸，超出后从头循环。这行代码替换了以前需要一整块 @counter-style 声明。对于「只在一处用到」的简单场景，代码更集中、更易删除。五种 system，用在哪。symbols() 支持五种计数规则。cyclic 从头到尾依次使用符号，到末尾后从头循环。最适合做状态标记类列表，比如待办事项（☐☐☐）、评分星级（★★☆）。fixed 每个位置对应固定符号，只循环一次，序号超出后回退到阿拉伯数字。适合已知上限的固定列表，比如步骤指引。numeric 把符号解释为进位制数字。比如传入 “0” “1”，就会产生二进制计数。适合需要特殊进制的场景。alphabetic 字母序循环。”A” “B” “C” 会产生 A、B、C、AA、AB……类似 Excel 列标。适合文档章节编号。symbolic 每轮循环符号数量递增，适合强调递进的列表。三个要注意的坑。第一个没有 fallback。symbols() 没有 fallback 机制，超出符号范围浏览器会直接显示原始数字。第二个匿名不可复用。symbols() 是匿名的，不能在多处通过名字引用。第三个 Safari 支持需要确认。线上使用前建议用 @supports 做渐进增强。三步上手。第一步找出一处用 emoji 或者自定义 @counter-style 的列表，看它是否只在单处使用。第二步确定符号数量是否有上限，列表长度不可控用 cyclic 更安全。第三步多处共用同一套符号集保留 @counter-style，symbols() 留给一次性场景。Chrome 154 自 2026 年 9 月 9 日起稳定推送，现在可以在新项目里直接用，在老项目里加 @supports 渐进增强即可。