quotes属性需配合content: open-quote/close-quote才生效，仅设quotes值无效；必须用伪元素显式调用，且值须为偶数个带引号字符串，配合:lang()与html lang属性才能正确应用中文引号。
quotes 属性必须配合 content: open-quote 才生效
只写 quotes: "“" "”"; 不会自动给文字加引号。浏览器根本不会扫描 HTML 文本里的双引号或中文字符，它只在你显式调用 content: open-quote; 或 content: close-quote; 的时候查表。
常见错误现象：写了 q { quotes: "“" "”"; }，但页面上 <q>你好</q> 依然没引号。
- 必须给
<q></q>加伪元素：q::before { content: open-quote; }和q::after { content: close-quote; } - 如果只加
::before没加::after，右引号就永远不会出现 -
open-quote和close-quote是关键字，不能加引号写成"open-quote"，否则当普通字符串处理
quotes 值必须是偶数个带引号的字符串
quotes 的语法非常严格：值必须是空格分隔的、成对出现的字符串，且每个字符串都得用单引号或双引号包裹。奇数个、裸写、中间带多余空格，整条声明都会被浏览器忽略。
错误示例：quotes: "“" "”" "‘";（三个值）→ 整条规则失效；quotes: “ ”;（没引号包裹）→ 无效；quotes: "“ " "”";（左引号末尾多一个空格）→ 解析失败。
- 正确写法：
quotes: "“" "”" "‘" "’";（四值，两对） - 中文场景常用一对就够了：
quotes: "“" "”";，第二层嵌套会 fallback 到 UA 默认（通常是英文双引号），不是重复用同一对 - Unicode 转义可用，如
"\201c" "\201d"，但前提是 CSS 文件编码为 UTF-8 且 HTML 声明一致
:lang(zh) 规则 + lang="zh" 声明缺一不可
quotes 本身不识别语言，它只响应 CSS 中的 :lang() 选择器匹配。没写 :lang(zh)，或者 HTML 元素没带 lang="zh"，浏览器就按默认英文引号走。
典型问题：CSS 里写了 q { quotes: "“" "”"; }，但中文段落仍显示 "你好"。
- HTML 必须声明语言，推荐在根元素加：
，或至少在目标元素上加：<q lang="zh">你好</q> - CSS 必须用
:lang(zh) q { quotes: "“" "”"; }，而不是模糊匹配如[lang*="zh"]，后者不符合标准且兼容性差 - 多语言混排时，子元素的
lang会继承父级，但若需覆盖，得显式重写，比如<p lang="en"><q lang="zh">你好</q></p>
移动端和旧浏览器的实际限制
别假设 quotes 在所有设备上都能稳定工作。Safari iOS 对 :lang() 切换基本不响应，Android WebView 很多版本直接忽略该属性，IE8 需要 才支持，IE7 及更早完全不支持。
最常被忽略的一点：当你在调试工具里看到 quotes 声明已加载，不代表它真正在渲染中起效——尤其在混合 RTL（如希伯来文）、内联文本、或动态插入的 DOM 中。
- 移动端建议降级方案：用
[lang="zh"] q::before { content: "“"; }和[lang="zh"] q::after { content: "”"; }硬编码，绕过open-quote查表逻辑 - RTL 语言（如希伯来文、阿拉伯文）还需额外设
direction: rtl;和unicode-bidi: embed;，否则引号位置可能反向错位 - 如果父元素设了
quotes: none，子元素即使写了:lang(zh)也不会触发中文引号
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
