quotes属性必须配合content: open-quote和close-quote才生效，且需配合:lang(zh)与lang="zh"声明、偶数个引号字符串对及safari兼容的四元组写法。
quotes属性必须配合content: open-quote才生效
只写quotes: "“" "”"，<q>你好</q>依然不显示引号。浏览器不会自动扫描文本内容，它只在伪元素中显式调用open-quote或close-quote时查表取值。
必须三者同时存在：
q { quotes: "“" "”"; }q::before { content: open-quote; }q::after { content: close-quote; }
漏掉任一环节，引号就完全不出现。常见错误是写了quotes但忘了伪元素，或者误写成content: "“"——这绕过了语言适配机制，:lang()失效，也失去嵌套能力。
中文引号必须配:lang(zh)和lang="zh"
quotes本身不识别语言，它只响应 CSS 中的:lang()选择器匹配。没写:lang(zh) q规则，或 HTML 元素没带lang="zh"，浏览器一律 fallback 到英文双引号。
检查点：
-
是否写在根节点（推荐） - 或至少在语义元素上明确声明：
<q lang="zh">你好</q> - CSS 规则必须写成
:lang(zh) q { quotes: "“" "”" "‘" "’"; }，不能只写q { quotes: ... } -
:lang(zh)比[lang="zh"]更健壮，支持lang="zh-Hans"等子标签继承
嵌套引号靠字符串对数决定，不是自动循环
quotes值必须是偶数个带引号的字符串，两两成对、空格分隔。顺序即嵌套深度：第一对用于最外层，第二对用于第一层内嵌，第三对用于再内嵌……超出定义范围的层级会 fallback 到 UA 默认引号（不是重复用最后一对）。
正确写法示例：
q { quotes: "「" "」" "『" "』"; }
对应 HTML：<q>他说<q>先做出来</q></q> → 外层用「」，内层用『』
错误写法：
-
quotes: "「" "」" "『"（奇数个）→ 整条声明被浏览器忽略 -
quotes: "“" "”"（仅一对）→ 第二层嵌套 fallback 到浏览器默认（通常是英文双引号）
Safari 兼容性陷阱：必须写满四元组
Safari（尤其 15.x 及更早）会忽略未显式声明四元组的quotes值。哪怕你中文场景只用一对，也得补足两对，否则直接 fallback 到英文引号。
错误写法（Safari 不认）：
:lang(zh) q { quotes: "“" "”"; }
正确写法（Safari 认）：
:lang(zh) q { quotes: "“" "”" "‘" "’"; }
IE8 要求页面有!DOCTYPE才识别quotes，IE7 及更早版本不支持。Chrome/Firefox 较宽容，Safari 最严格。
最容易被忽略的点是：忘了给q加::before/::after，或者写了但没配content: open-quote——这时候无论lang多准确，引号都出不来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
