:lang() 通过元素自身或祖先的 lang 属性值匹配语言，支持继承与前缀匹配，故 :lang(zh) 和 :lang(en) 可同时生效。
:lang() 是解决中英文混排样式的最直接手段，但必须让每个语言片段“自带身份”，不能只靠 一锤定音。
为什么 :lang(zh) 和 :lang(en) 能同时生效
浏览器对 :lang() 的匹配是基于元素自身或祖先的 lang 属性值，并支持继承和前缀匹配。只要一段文本被包裹在带 lang 的元素里，哪怕它嵌套在另一个语言容器中，:lang(en) 也能精准捕获它。
-
<p lang="zh">欢迎使用 <span lang="en">API</span> 服务</p>中，span:lang(en)会命中，p:lang(zh)也会命中 -
:lang(zh)匹配lang="zh"、lang="zh-CN"、lang="zh-HK"；:lang(en)同理匹配en、en-US、en-GB - 不写
lang的内联文本（如裸<em>HTTP</em>）不会被任何:lang()选中——浏览器不猜，只认属性
:lang(en) 必须单独控制英文术语的字体与字间距
中文字体（如 "PingFang SC"）渲染英文时，字母间距过紧、“API”“HTTP” 看起来像粘连的方块。靠 body { font-family: "PingFang SC", sans-serif; } 无法解耦。
- 正确做法是分离声明：
:lang(en) { font-family: "Inter", "Segoe UI", system-ui; letter-spacing: 0.02em; } - 避免把
sans-serif放在font-family最前面，否则会跳过你指定的语言字体 - 若混排频繁（如技术文档），建议给术语加
<code lang="en">fetch或<span lang="en">JSON</span>，比依赖父级继承更可靠
别在 :lang() 规则里写 direction 或 text-align
:lang(ar) 或 :lang(he) 确实常需 RTL，但中文段落里夹一段阿拉伯数字或英文单词时，仅靠 :lang(en) { direction: ltr; } 不够——它可能被外层 dir="rtl" 覆盖或冲突。
-
:lang()只管字体、引号、断行、连字等语言本体样式；方向控制必须用:dir(rtl)配合逻辑属性（如margin-inline-start） - 若真要干预嵌入英文的方向行为（比如富文本中强制
lang="en"的代码块保持 LTR 断行），应加unicode-bidi: embed;+direction: ltr;，而非仅靠:lang(en) -
:lang(zh) { text-align: justify; }可以，但:lang(en) { text-align: left; }很可能被父容器的text-align覆盖，优先用逻辑值text-align: start;
字体 fallback 顺序错一位，混排就出问题
中日韩混排页面里，一个 :lang(zh) 规则如果写成 font-family: "Noto Sans CJK SC", "Noto Sans JP", sans-serif;，日文字符可能被第一项“抢走”，而该字体对日文假名支持弱，导致字形异常。
- 每个
:lang()规则的font-family必须以该语言「强支持」字体开头：中文用"SF Pro SC"或"HarmonyOS Sans SC"，日文用"Yu Gothic"，英文用"Inter" - 跨语言字体栈不要堆砌在一起；
:lang(zh)和:lang(ja)应是两个独立规则，各自管理自己的字体链 - 系统字体名大小写敏感，
"segoe ui"在 Windows 上无效，必须写"Segoe UI"
最容易被忽略的是：动态插入内容（如 JS 渲染的弹窗、评论区）若没同步带上 lang 属性，:lang() 就完全失效——它不查 DOM 树外的语言上下文，也不 fallback 到 的值做兜底匹配，只看那个节点自己或最近祖先有没有合法 lang。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
