CSS的quotes属性需配合:lang()伪类使用才能生效，仅设quotes值无效；必须为q元素显式设置lang属性并用:lang(zh)/:lang(en)分别定义引号，且嵌套层级需按语言习惯精简配置。
为什么直接写 quotes 值不管用
很多人写了 quotes: "“" "”" "‘" "’"; 却发现中文段落里还是显示英文引号，根本原因是：CSS 的 quotes 属性本身不识别语言，它只负责「提供引号池」；真正决定用哪一对的，是 :lang() 伪类 + 元素的语言上下文。浏览器不会自动根据系统语言或 <html lang="zh"> 推断内容该用什么引号——必须显式匹配并覆盖。
:lang(zh) 和 :lang(en) 必须配合 quotes 一起用
只有把语言选择器和引号定义绑在一起，才能生效。常见错误是只写全局 quotes，或者把 :lang() 写在错误层级（比如套在 blockquote 里却忘了它内部的 <p> 没继承）。
-
q元素默认启用引号，但需确保父元素或自身有lang属性，例如<q lang="zh">你好</q> - 对普通段落里的引用文字，推荐用
[lang="zh"] q或:lang(zh) q精确控制 - 英文引号要显式重置，否则可能沿用浏览器默认（如 Chrome 对
lang="en"默认用" "，但 Firefox 可能不同）
q {
quotes: "“" "”" "‘" "’";
}
:lang(zh) q {
quotes: "“" "”" "‘" "’";
}
:lang(en) q {
quotes: '"' '"' "'" "'";
}
引号嵌套层级在不同语言下行为不一致
CSS 的 quotes 值按顺序成对使用：第一对用于最外层，第二对用于第一层嵌套，依此类推。但中文排版习惯通常不用双层嵌套引号（不像英文常用 "He said 'hello'"），所以中文场景下建议精简定义，避免意外触发第二对。
- 中文设为
quotes: "“" "”";（仅一对）更安全，多数编辑器/浏览器对三层以上嵌套支持不稳定 - 如果真需要中英混排嵌套（如引文中再引英文），得手动加
q[lang="en"]覆盖内层，不能依赖自动递进 - 注意：Firefox 会严格按
quotes列表索引取值，Chrome/Safari 在某些版本里对空值或缺失对处理不一致
HTML 的 lang 属性没写对，CSS 就完全失效
:lang(zh) 匹配的是元素自身的 lang 属性，不是页面根节点的。如果只在 <html lang="zh"> 上写了，而 <q> 标签没继承（比如中间有 lang="en" 的容器），那它就匹配不到。
立即学习“前端免费学习笔记（深入）”；
- 最稳妥方式：给每个
<q>显式加lang，例如<q lang="zh">他说</q> - 若内容由 CMS 输出，确保模板生成时注入正确
lang，别依赖 JS 补充（CSS 优先级和时机不可控） -
:lang()不支持通配符或子标签匹配，:lang(zh-*)在部分旧浏览器（如 IE）不生效，需降级写:lang(zh), :lang(zh-CN), :lang(zh-TW)
引号格式切换看着简单，实际卡点全在 HTML 语言标记的粒度和 CSS 选择器的匹配精度上——漏掉一个 lang 属性，或少写一条 :lang(en) 规则，就退回默认引号。
