quotes属性需配合::before/::after中content:open-quote或close-quote使用才生效，仅设quotes不调用则无效；值须成对空格分隔，按嵌套层级顺序匹配，且必须用引号包裹字符。
quotes 属性确实能自定义引号字符，但它只对 ::before 和 ::after 伪元素中使用 content: open-quote 或 content: close-quote 的场景生效——不是直接替换所有双引号文本，这点很多人一开始就想错了。
为什么 quotes 设置后没效果？
最常见的原因是：没配合 content 伪元素使用。浏览器不会自动扫描 HTML 里的 " 或 “” 并按 quotes 替换；它只在显式调用 open-quote / close-quote 时查表。
- 必须给元素设置
quotes，比如blockquote { quotes: "«" "»" "‹" "›"; } - 必须在该元素的伪元素里写
content: open-quote;（或close-quote） - 嵌套层级每深一层，自动轮到下一对引号（
open-quote取第1、3、5…对，close-quote取第2、4、6…对）
quotes 的值语法和配对规则
值是空格分隔的字符串对，必须成对出现（偶数个），否则整条声明无效（浏览器会忽略）。顺序即嵌套优先级：最外层用第一对，第二层用第二对，依此类推。
例如：quotes: "「" "」" "『" "』"; 表示：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 第一层
content: open-quote;→「 - 第一层
content: close-quote;→」 - 第二层（如
blockquote blockquote）→『和』
如果只写 quotes: "「" "」";（两值），第二层及更深会 fallback 到用户代理默认引号（通常是英文双引号），不是重复用同一对。
实际可用的典型场景
适合需要语义化、可嵌套、且不依赖 JS 或冗余 HTML 标签的引文结构，比如学术引用、多层对话、古籍注疏等。
- 给
<blockquote>设quotes，再用blockquote::before { content: open-quote; }插入左引号 - 避免在 HTML 中硬编码引号字符，方便后期统一调整风格（比如从中文弯引号切到日文角括号）
- 搭配
lang属性可做语言感知切换：[lang="ja"] blockquote { quotes: "「" "」" "『" "』"; }
注意：IE 完全不支持 quotes，Edge 12+ 支持；现代 Chrome/Firefox/Safari 均无问题。
容易被忽略的兼容细节
quotes 的值不能含未转义的空格或括号，比如 "（" "）" 是合法的，但 "（ " "）"（左引号末尾带空格）会导致整条声明失效。
- 所有引号字符必须用引号包裹（单或双均可），不可裸写：
quotes: « »;❌，quotes: "«" "»";✅ - Unicode 字符如
\201C可用，但需确保 CSS 文件编码为 UTF-8，且 HTML 声明一致 - 若父元素设了
quotes，子元素未重置，则继承；但若子元素设了新值，就完全覆盖，不会叠加
真正要用好它，得把 quotes 当作引号“字典”，而把 open-quote 当作查字典的动作——少一个环节，就看不到效果。
