q标签默认只渲染英文双引号，不会根据lang属性自动切换多语言引号；必须配合CSS的quotes属性并结合lang选择器显式定义，如[lang="zh"] q { quotes: "“" "”" "‘" "’"; }。
q 标签本身不自动适配引号样式
q 标签语义上表示「短引用」，但浏览器**不会根据 lang 属性自动切换引号形状（如中文用“”、英文用“”、法文用«»）**。它默认只渲染为英文双引号（"），且该行为由用户代理样式表（UA stylesheet）控制，不是 HTML 或 CSS 规范强制要求的多语言引号逻辑。
必须配合 CSS 的 quotes 属性才生效
要让 q 显示对应语言的引号，得手动用 quotes 定义层级和符号，并确保父元素或自身设置了正确的 lang 值：
-
quotes必须写在匹配lang的选择器里（例如[lang="zh"] q），不能只写q { quotes: "“" "”" "‘" "’"; } - 引号值是成对出现的：第一对是外层引号，第二对是内层嵌套引号（可省略）
- 不同语言需独立声明，CSS 不会“推断”中文该用什么——你得明确写
[lang="zh"] q { quotes: "“" "”" "‘" "’"; } - 注意引号字符本身要能被正确编码（推荐用 UTF-8，避免转义如
\201C，易出错）
常见失效场景和修复方式
即使写了 quotes，也常因以下原因看不到效果：
-
lang属性没写在q的**最近祖先元素**上（比如写在body上，但中间某层覆盖了lang） - 浏览器不支持
quotes（IE 全系不支持；旧版 Safari 对嵌套q渲染不稳定） - CSS 优先级被其他规则覆盖（比如某个
q { quotes: none; }生效了） - 用了伪元素（
::before/::after）手动加引号，反而绕过了q的语义机制，失去可访问性和维护性
一个最小可行示例
<p lang="zh">
<q>这是一个中文引用</q>，
里面嵌套 <q>另一层</q>。
</p>
<style>
[lang="zh"] q {
quotes: "“" "”" "‘" "’";
}
[lang="fr"] q {
quotes: "«" "»" "‹" "›";
}
</style>
这个例子中，外层引号显示为“”，内层为‘’；法文段落则用 «»。但要注意：q 的嵌套层级依赖 DOM 结构深度，不是靠 lang 切换——同一段里混用中/法语时，引号不会按子串语言自动变，只能靠包裹不同 lang 的容器来隔离。
立即学习“前端免费学习笔记（深入）”；
实际项目中，多语言引号容易被当成“小细节”忽略，但对本地化质量影响直接。关键是别指望浏览器自动识别，每种目标语言都得显式配置quotes，并验证 DOM 中 lang 的传播路径是否干净。 
