quotes属性本身不直接渲染引号，必须配合::before{content:open-quote}和::after{content:close-quote}才能生效；漏掉任一环节或未正确设置嵌套规则、lang匹配、display类型等均会导致引号不显示。
quotes 属性本身不直接渲染引号，它只是一张“查表指令”，必须配合 ::before { content: open-quote; } 和 ::after { content: close-quote; } 才生效；漏掉任一环节，页面上就看不到任何引号。
为什么写了 quotes 却没显示引号？
最常见原因不是语法错，而是触发链断裂：
- 只在父元素（比如
blockquote）设了quotes，但没给它写::before/::after规则 - 写了
q::before { content: open-quote; }，但没给q元素本身声明quotes属性 - 用了
<q>标签却依赖浏览器默认样式——现代 Chrome/Firefox 已默认移除q的open-quote行为，必须显式定义 - 在内联元素（如
<span>）上用quotes+ 伪元素，但没设display: inline-block或block，导致伪元素不渲染
quotes 值的配对规则和嵌套逻辑
quotes 的值必须是偶数个带引号的字符串，空格分隔，顺序即嵌套层级：
-
quotes: "「" "」";→ 第一层用「…」，第二层及更深 fallback 到 UA 默认（通常是英文双引号） -
quotes: "「" "」" "『" "』" "〝" "〞";→ 支持三层嵌套，第四层开始 fallback -
quotes: "«" "»" "‹" "›";→ 注意每个字符串必须用英文引号包裹，« »这种写法整条声明会被浏览器静默忽略 - 写成奇数个（如
"「" "」" "『"）→ 整条 CSS 规则失效，控制台无报错，也不继承父级值
多语言场景下 lang 切换为何经常失效？
理论上 q:lang(zh) { quotes: "「" "」" "『" "』"; } 应该生效，但实际限制很多：
立即学习“前端免费学习笔记（深入）”；
- Safari iOS 对
lang+quotes组合支持极弱，即使 HTML 有lang="zh"，也大概率回退到英文引号 - Android WebView（尤其旧版 Chromium 内核）完全忽略
quotes声明，无论是否带lang -
quotes不继承自html或body，必须在目标元素（如q、blockquote）上直接设置 - 更可靠的做法：用
[lang="zh"] q、[lang="ja"] q等选择器硬编码不同引号，放弃依赖自动匹配
真正容易被忽略的点是：quotes 生效的前提不是“写了”，而是“查得到”——浏览器只在当前元素上找 quotes 值，不会向上继承或向下传播；嵌套层级靠的是元素树深度（比如 q > q > q），不是 CSS 选择器嵌套深度。
