quotes属性必须配合::before/::after伪元素及open-quote/close-quote函数才能生效，且需定义偶数个引号对、正确设置lang匹配和css规则，缺一不可。
quotes属性必须配合::before/::after才能生效
只写quotes: "“" "”"，<q></q>内容依然没引号。浏览器不会自动扫描文本并替换，它只在伪元素中显式调用open-quote或close-quote时查表。
必须同时满足三点：
-
q { quotes: "“" "”" "‘" "’"; }—— 定义四元组（两对），支持嵌套 -
q::before { content: open-quote; }—— 插入外层左引号 -
q::after { content: close-quote; }—— 插入外层右引号
漏掉任一环节，引号就完全不出现。常见错误是写了quotes但忘了伪元素，或者用content: "“"这种字面量——这绕过了lang匹配机制，多语言切换就失效了。
lang属性不等于自动切换，必须用:lang()选择器绑定
quotes本身不识别语言，它只响应 CSS 中的:lang(zh)这类选择器匹配。没配:lang(zh)规则，或 HTML 元素没带lang="zh"，浏览器一律 fallback 到英文双引号。
检查点：
-
是否写在根节点（推荐） - 或至少在语义元素上明确声明：
<q lang="zh">你好</q> - CSS 规则必须写成
:lang(zh) q { quotes: "“" "”" "‘" "’"; }，不能只写q { quotes: ... } -
[lang="zh"]也能工作，但:lang(zh)支持子标签继承（比如lang="zh-Hans"也匹配），语义更准确、兼容性更好
quotes值必须成对、偶数、顺序即层级
quotes值必须是偶数个带引号的字符串，两两成对，空格分隔。顺序即嵌套深度：第一对用于最外层，第二对用于第一层内嵌，第三对用于再内嵌……超出定义范围的层级会 fallback 到 UA 默认引号（不是重复用最后一对）。
正确写法示例：
q { quotes: "「" "」" "『" "』"; }
对应结构：<q>他说<q>快上线</q></q> → 外层显示「快上线」，内层显示『快上线』
常见错误：
-
quotes: "「" "」" "『";（奇数个）→ 整条声明被浏览器忽略 -
quotes: "“" "”";（仅一对）→ 第二层嵌套会 fallback 到英文双引号，不是自动复用 -
quotes: « »;（未加引号包裹）→ 语法错误，声明无效
老浏览器和重置样式容易让quotes失效
IE11 完全不支持quotes；旧版 Safari 对lang匹配敏感，lang="zh-CN"可能不触发，建议统一用lang="zh"。
更常见的失效原因是样式重置：
- 某些 UI 框架或
normalize.css会设q { quotes: none; }，直接清空上下文 - 父容器设了
quotes: none或all: unset，子q无法继承 -
q::before { content: ""; }这类覆盖会彻底屏蔽引号
最小可靠配置（跨浏览器）就是三行：
q { quotes: "“" "”" "‘" "’"; }<br>q::before { content: open-quote; }<br>q::after { content: close-quote; }
真正容易被忽略的是：引号是否正确，不取决于你写了几个<q></q>，而取决于quotes是否在作用域内声明、lang是否匹配、以及有没有为所有嵌套层级预留足够引号对。漏掉其中一环，上线后就只能看到 “奇怪的英文引号” 或干脆没引号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
