CSS quotes 怎样为多层引用设置不同引号

做评论卡片、引用摘要或文档预览时，多层 经常会暴露一个小问题：外层和内层都显示成同一种引号，读者看不出引用关系。这个问题通常不是 HTML 文本写错，而是 CSS 没有把不同嵌套深度映射到不同的引号对。

官方资料：https://developer.mozilla.org/en-US/docs/Web/CSS/quotes

quotes 的字符串值按“外层、第一层嵌套、第二层嵌套”的顺序声明引号对。浏览器会根据当前引用深度选择对应的一对；如果只声明一对，更深的层级会继续重复最后一对。

先判断问题来自哪一层引用

我在一个评论组件里遇到过这样的现象：外层引文已经有一对中文引号，作者引用其中一句时，内层仍然使用同样的引号，视觉上像是两个独立句子拼在一起。最先要确认的是，内容是否真的形成了嵌套引用，以及引号是不是由 或 content: open-quote 自动生成。

设计师说：先保留信息层级，再调整颜色。

这里的两个 q 不是两个并列元素，而是深度分别为 0 和 1 的两层引用。只要 CSS 通过 quotes 提供两组开闭符号，浏览器就有足够的信息区分它们。

触发信号：嵌套 q 看起来像同一层

如果嵌套引用都使用相同的引号，常见原因有三个：

• 只设置了一组引号对，却期待浏览器自动换成另一种符号。
• 把两个 q 写成了并列元素，实际上没有产生嵌套深度。
• 组件内部重新设置了 quotes: auto 或其他值，覆盖了外层规则。

排查时不要先手动把引号字符写进文本。先看 DOM 的层级，再确认 quotes 是否继承到当前元素，最后才判断要不要局部覆盖。

修复动作一：按深度声明多组引号

quotes 的字符串值每两个字符串组成一组：第一项是开引号，第二项是闭引号。第一组给最外层引用，第二组给第一层嵌套，后面依次类推。

.review {
  /* 第一组给外层，第二组给第一层嵌套，第三组给更深层级。 */
  quotes: "「" "」" "『" "』" "‹" "›";
}

.review q::before {
  /* open-quote 会按照当前深度取 quotes 中对应的开引号。 */
  content: open-quote;
}

.review q::after {
  /* close-quote 会闭合当前深度，避免手写符号和层级脱节。 */
  content: close-quote;
}

在这个例子里，外层 q 使用“「」”，里面的 q 使用“『』”，第三层使用“‹›”。如果嵌套深度超过三层，最后一组会继续被使用。

如果使用浏览器对 q 的默认生成行为，也可以只写：

.review {
  /* q 元素默认会生成 open-quote 和 close-quote。 */
  quotes: "「" "」" "『" "』";
}

这时不必额外为 q::before 和 q::after 设置 content。需要自定义伪元素时再显式写出关键字。

根因一：只写一对引号并不会自动产生层级变化

下面的写法可以让所有层级都使用同一对符号，但它没有表达“外层”和“内层”是不同语义层级：

.review {
  /* 只提供一组时，更深层级会重复这一组。 */
  quotes: "“" "”";
}

这不是 CSS 出错，而是输入规则的结果。要让多层引用有视觉区别，至少要提供两组字符串；每一组都必须保持开闭顺序。

修复动作二：理解 auto、lang 和继承

quotes 是可继承属性。显式使用 auto 时，浏览器会参考继承来的 lang 信息选择语言相关的引号。

外层内容内层内容

.review {
  /* 让当前组件回到语言相关的默认引号策略。 */
  quotes: auto;
}

.review--manual {
  /* 手工值会覆盖 auto，适合需要固定符号的组件。 */
  quotes: "「" "」" "『" "』";
}

文章正文可以用 auto 适配不同语言，固定视觉规范的卡片则可在组件根节点明确声明一组完整引号对。因为属性会继承，子节点不写新值时会沿用父节点规则。

修复动作三：在 generated content 中保持深度一致

有些组件不用 q，而是给普通元素的伪元素设置引号。这时仍然可以用 open-quote 和 close-quote，关键是让每一层都成对出现。

.quote {
  /* 普通元素也能复用同一组嵌套引号规则。 */
  quotes: "“" "”" "‘" "’";
}

.quote::before {
  /* 打开一层引用并显示相应的开引号。 */
  content: open-quote;
}

.quote::after {
  /* 关闭这一层引用并显示相应的闭引号。 */
  content: close-quote;
}

如果需要增加引用深度但不想出现开引号，可以使用 no-open-quote；no-close-quote 只减少深度而不显示闭引号。

.quote-bridge::before {
  /* 只推进引用层级，不在当前位置绘制开引号。 */
  content: no-open-quote;
}

.quote-bridge::after {
  /* 只回退引用层级，不绘制闭引号。 */
  content: no-close-quote;
}

防复发：把 quotes 固定在组件边界

这类问题最容易在组件组合后复发。建议把引号规则放在引用组件的根节点，而不是散落在多个后代选择器里：

.quote-card {
  /* 组件根节点统一声明所有允许的嵌套层级。 */
  quotes: "「" "」" "『" "』";
}

.quote-card q {
  /* 让后代 q 使用继承的 quotes，不在局部重置。 */
  quotes: inherit;
}

.quote-card q::before {
  /* 每个 q 都负责打开自己的层级。 */
  content: open-quote;
}

.quote-card q::after {
  /* 每个 q 都负责关闭自己的层级。 */
  content: close-quote;
}

复盘时记录当前节点的嵌套深度、实际继承到的 quotes 值，以及伪元素使用的是可见关键字还是只改深度的关键字。只看最终文本，通常无法判断是 DOM 层级错了，还是 CSS 在中途被覆盖。

快速判断表

结论

CSS 多层引用的关键不是手工把引号字符塞进文本，而是让引用深度和引号对保持一一对应。先确认 DOM 的嵌套关系，再在组件根节点声明 quotes，最后根据实现方式选择浏览器默认的 q 引号，或显式使用 open-quote 与 close-quote。

如果需要适配多语言，优先考虑 auto 与祖先的 lang；如果需要稳定的品牌排版，就显式声明完整的引号对，并避免子组件随意覆盖。只改变引用层级而不显示符号时，再使用 no-open-quote 和 no-close-quote。

常见追问

quotes 中的字符串为什么必须成对出现？

每两个字符串组成一组，第一项用于打开引用，第二项用于关闭引用。浏览器按深度选择整组，而不是把所有字符串当作一个连续列表。

嵌套层级超过声明的引号对会怎样？

如果当前深度超过已声明的组数，会重复使用最后一组。要让更深层级继续变化，需要追加新的开闭引号对。

为什么给 q 设置 quotes 后，伪元素里的符号还是不对？

检查伪元素是否使用了字面量引号或普通 content 字符串。只有 open-quote、close-quote 以及对应的 no-* 关键字会参与引用深度计算。

资料来源

https://developer.mozilla.org/en-US/docs/Web/CSS/quotes