quotes设了但引号没出现，根本原因是未同时满足三个条件：未设置quotes属性值、未用::before/::after配合content:open-quote或close-quote调用、quotes值格式错误（不成对、未用英文引号包裹或未空格分隔）。
quotes设了但引号没出现，到底缺了哪一步？
浏览器根本不会自动扫描 <q></q> 里的文字去套引号——它只在你显式调用 open-quote 或 close-quote 时查 quotes 表。漏掉任意一个环节，引号就彻底消失：
- 忘记给元素写
quotes值（比如q { quotes: "“" "”" "‘" "’"; }） - 没配伪元素，或写了但没设
content（q::before { content: open-quote; }缺一不可） -
quotes值格式错误：必须成对、空格分隔、每对用英文双引号包裹，比如"“" "”" "‘" "’"；写成"“" "”"只有一对，嵌套第二层会 fallback 到浏览器默认（通常是英文双引号）
常见错例：q { quotes: “” ‘’; } —— 引号用中文符号、没空格、没英文引号包裹，全无效。
为什么lang="zh"写了，<q></q>还是显示英文引号？
这不是 bug，是规范行为。<q></q> 的 UA 默认样式不强制按 lang 切换引号，Chrome、Firefox、Safari 各自按自己策略 fallback，结果往往不一致。别依赖它。
- 必须主动覆盖：全局统一设
q { quotes: "“" "”" "‘" "’"; } - 语言区分靠选择器，不是靠浏览器自动识别：用
q[lang="zh"]或:lang(zh)，而不是只靠 -
:lang(zh)支持子标签继承（lang="zh-Hans"也匹配），[lang="zh"]是精确匹配，选哪个取决于你的语言切换粒度
注意：quotes 属性本身不感知语言，它只是查表；真正起作用的是你写的 CSS 规则是否命中当前元素的 lang 值。
用户手动切语言时，quotes 为啥不更新？
CSS quotes 是静态声明，无法响应运行时 lang 属性变更。JS 改了 ，已渲染的 <q></q> 不会重算引号。
- 正确做法：移除所有
quotes声明，改用 class 控制，例如.lang-zh q::before { content: "“"; } - 切换语言时，JS 修改
或的 class（如class="lang-zh"），不要动lang属性 - 避免用
lang属性做运行时样式开关——它可能触发浏览器内部不可控行为（比如字体回退、数字渲染逻辑）
动态场景下，quotes + open-quote 组合完全失效，只能退回到手动控制伪元素内容。
移动端 Android 上引号显示为方框，怎么修？
这是典型 Unicode 渲染问题。某些旧版 Android 系统（尤其 Webview）不支持 HTML 实体（如 “），但能正确渲染 UTF-8 字符。
- 必须用 Unicode 字符，不是 HTML 实体：
"“"（U+201C）和"”"（U+201D），而非“/” - 同理，日文用
"「"（U+300C）、"」"（U+300D），法文用"« "（U+00AB）、" »"（U+00BB） - 如果项目用了构建工具（如 PostCSS），确认源码文件编码为 UTF-8，且未被转义成实体
这个坑在 iOS 上通常不出现，但 Android 4.x–10.x 的 Webview 中高频发生，不能跳过验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
