q标签嵌套引号最多可靠两层，浏览器普遍仅支持外层双引号、内层单引号；三层及以上需手动用unicode字符；quotes属性必须为四元组并直接作用于q元素，配合lang属性和::before/::after伪元素方可正确渲染。
q标签嵌套引号最多只可靠两层
浏览器对 <q></q> 嵌套的支持是有限的，不是规范写得不对，而是实现上普遍只处理两级：外层用双引号，内层用单引号。再往里套第三层，Chrome/Firefox 可能重复使用第二对引号，Safari 和旧 Android WebView 往往直接忽略内层、不渲染引号，甚至整段引号消失。
常见错误现象：<q>他说<q>她讲<q>快上线</q></q></q> 在多数浏览器中渲染为 “他说‘她讲快上线’”，最内层 <q></q> 完全没引号。
- 安全边界是：
<q>A<q>B</q></q>—— 仅两层 - 三层及以上必须放弃自动嵌套，改用 Unicode 字符手动写，例如：
“他说‘她说『快上线』’” - 别依赖
getComputedStyle(qEl).quotes判断是否生效，Safari 返回空字符串是常态，不代表 CSS 没加载
quotes 属性必须写四元组且作用于 q 元素本身
quotes 不是写在 html[lang="zh"] 或 body 上就能生效的全局规则。它必须直接写在 q 上，且至少提供四元组（两对引号），否则 Safari 会完全忽略该属性，连最外层引号都不显示。
错误写法：q { quotes: "「" "」"; } → 大部分浏览器不渲染任何引号
正确写法：q { quotes: "“" "”" "‘" "’"; } 或更稳妥的中文排版：q { quotes: "「" "」" "『" "』"; }
- 第一对用于最外层
<q></q>，第二对用于嵌套的<q></q> - 只设两元组，嵌套时会 fallback 到重复使用第一对，无法切换
- IE11 完全不支持
quotes，若需兼容，得降级为q::before { content: "“"; }+q::after { content: "”"; }
lang 属性必须显式声明且值要兼容
<q></q> 的引号行为不靠系统语言或页面 自动继承，每个 <q></q> 都应带 lang，且推荐用 lang="zh" 而非 lang="zh-CN" —— 后者在老 Safari 中常被忽略，导致引号回退成英文双引号。
混合语言引用时尤其关键：<q lang="zh">他强调<q lang="en">ship it</q></q> 才能确保外层用中文引号、内层按英文规则处理（如显示 "ship it"）；如果内层漏掉 lang="en"，浏览器仍按中文规则套「」，语义错乱。
- 父元素
会覆盖子元素lang="zh"，所以不要全局设英文 lang 再局部切中文 - 没写
lang，屏幕阅读器大概率读作 “quote start”，而非“中文引号开始”，无障碍失效 -
cite属性纯属元数据，不影响引号样式，也不触发任何渲染或朗读
伪元素 ::before/::after 必须配合 open-quote/close-quote
q::before { content: open-quote; } 和 q::after { content: close-quote; } 是引号生效的前提。只写 quotes 但没定义伪元素，引号根本不会出现——这不是 bug，是 CSS 规范要求。
容易踩的坑：q::before { content: "“"; } 这种硬编码写法虽能出引号，但失去嵌套自动切换能力；而只写 q::before { content: open-quote; } 却忘了 q { quotes: ... }，结果是空白或默认英文引号。
- 必须同时存在：CSS
quotes值 +q::before+q::after - 若用了重置样式库（如 normalize.css），可能清除了
q的默认伪元素，需显式补回 - 某些构建工具或 CSS-in-JS 库会 strip 空格，导致
quotes: "“" "”" "‘" "’"被解析失败，建议加空格分隔并验证生成结果
<q></q> 标签，而是 quotes 四元组、lang 精确控制、伪元素显式触发这三者缺一不可。漏掉任意一个，上线后看到的就只是 “奇怪的英文引号” 或干脆没引号。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
