querySelector不支持中文作为CSS选择器值，必须使用标准语言标签（如zh、en）；data-lang应为运行时标识，友好名称需用独立属性（如data-lang-label）承载，并确保HTML声明UTF-8编码。
这个问题本质不是“中文属性乱码”，而是 querySelector 本身不支持用中文作为 CSS 选择器去匹配元素——它只认合法的标识符（如字母、数字、下划线、短横线），且不能以数字开头。如果你写了 data-lang="中文" 或 class="按钮"，再用 document.querySelector('[data-lang="中文"]')，浏览器会直接报语法错误或返回 null，因为双引号内的中文在 CSS 选择器语法中是非法字符。
确保 data 属性值是合法、可查询的字符串
语言标识必须用标准语言标签（如 zh、en、zh-CN、en-US），而不是中文文本。这是国际通用规范，也是 i18n 库（如 i18next、vue-i18n）运行的前提。
- ✅ 正确写法：
<div data-lang="zh">你好</div>→ 可被querySelector('[data-lang="zh"]')安全匹配 - ❌ 错误写法：
<div data-lang="中文">你好</div>→querySelector('[data-lang="中文"]')会抛SyntaxError - 别把用户看到的文案（如“简体中文”）塞进
data-lang，那是展示层的事；data-lang是运行时标识，只负责驱动逻辑
用属性转义或 encodeURIComponent 不解决根本问题
有人尝试对中文做 encodeURIComponent 再拼进选择器，比如 [data-lang="zh%2Dcn"]，这看似绕过语法限制，但实际不可靠：
- CSS 选择器不解析 URL 编码，
%2D就是字面量三个字符，不是短横线 - 即使侥幸匹配上，也违背语义——
data-lang的值本应和 i18n 实例的changeLanguage('zh-CN')参数严格一致，而编码后的字符串无法直接传给库 - 增加调试成本：DOM 中看到的是
zh%2Dcn，控制台查不到对应元素，开发体验差
需要中文显示？用独立字段分离语义与文案
如果页面某处要显示“简体中文”“English”这类友好名称，应该用另一个属性承载，例如 data-lang-label 或直接用 textContent，而保留 data-lang 纯净可用：
<option value="zh" data-lang-label="简体中文">简体中文</option>- 切换时读
option.value（即zh）传给 i18n，而非读textContent或自定义属性中的中文 - 这样既保证 DOM 查询安全，又不影响 UI 表达
检查 HTML 解析是否真用了 UTF-8
极少数情况下，如果 HTML 文件本身没声明编码，浏览器可能用错误编码解析，导致 querySelector 拿到的属性值是乱码字节流。确认页面 <head> 中有：
并且服务器响应头包含 Content-Type: text/html; charset=utf-8。否则，即使你写了 data-lang="zh"，JS 读出来也可能是乱码二进制，进而影响后续逻辑判断。
