content: open-quote未触发引号是因为未在目标元素上显式设置quotes属性，且quotes值必须为偶数个带引号字符串（如"「" "」" "『" "』"），同时需配合::before{content:open-quote}和::after{content:close-quote}使用才生效。
为什么 content: open-quote 没触发引号？
因为 open-quote 和 close-quote 不是“自动扫描文本并替换”的开关，它们只是查表指令——查的是当前元素上设置的 quotes 属性值。没设 quotes，浏览器就用默认值（比如英文双引号），甚至某些内核下直接 fallback 到空字符串。
常见错误现象：
-
q::before { content: open-quote; }写了，但页面没任何引号 - 只给父容器设了
quotes，子q嵌套后仍用同一对符号 - 写了
quotes: "「" "」"，但第二层嵌套显示成了“”或空白
必须同时满足两个条件才生效：
- 目标元素（如
q、blockquote）显式声明quotes，且值为偶数个带引号的字符串（如"「" "」" "『" "』"） - 在该元素的
::before里写content: open-quote，::after里写content: close-quote
quotes 的值怎么配对才不被浏览器忽略？
quotes 声明一旦语法出错，整条规则会被浏览器静默丢弃——不会报错，也不会 fallback 到上层值。
关键规则：
- 值必须成对出现：2 个、4 个、6 个……不能是 1 个或 3 个
- 每对用空格分隔，且每个字符串必须用英文双引号或单引号包裹（
"«" "»" "‹" "›"✅，« »❌） - 顺序即嵌套优先级：第 1–2 个用于最外层，第 3–4 个用于第二层，依此类推
- 如果嵌套超过已声明对数，超出层级会 fallback 到用户代理默认引号（不是重复用最后一对）
示例：quotes: "「" "」" "『" "』" "〝" "〞"; 表示：
- 第一层
q→「…」 - 第二层
q > q→『…』 - 第三层
q > q > q→〝…〞 - 第四层起 → 浏览器默认（通常是
“…”）
嵌套时引号错位或重复闭合怎么办？
典型症状：两层 q 套着，结果生成了 「『…』」，但结尾多了一个 」；或者第二层开头没引号。
根本原因不是 quotes 配错了，而是伪元素触发逻辑没对齐：
-
::before只响应open-quote，::after只响应close-quote；反过来写无效 - 浏览器不会自动给子元素补
::after，每一层都得自己写q::before和q::after - 如果某层只想开不闭（比如对话中未完的引用），要用
content: no-close-quote显式抑制
正确写法片段：
q {
quotes: "「" "」" "『" "』";
}
q::before { content: open-quote; }
q::after { content: close-quote; }
这样，<q><q>内层</q>外层</q> 才会渲染为 「『内层』外层」。
中文语境下怎么避免引号“看起来像英文”？
很多中文站点用了 <q></q> 却还是显示 “”，不是 CSS 失效，是没覆盖浏览器默认 quotes 值。
解决方式很直接：
- 别依赖浏览器默认，统一重置：
q, blockquote { quotes: "「" "」" "『" "』"; } - 如果需区分语言，用
[lang="zh"]选择器，但注意：HTML 的lang属性必须真实存在且值匹配，否则不生效 - 慎用
quotes: none——它会让所有open-quote/close-quote失效，且无法仅靠 HTML 恢复
最容易被忽略的一点：嵌套层级由 DOM 结构决定，不是由 CSS 选择器深度决定。哪怕你写了 q q q::before，只要 HTML 里只有两层 <q></q>，第三对 quotes 就永远不会被调用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
