CSS属性选择器支持中文值，如[data-name="用户中心"]在现代浏览器中合法有效；但需确保HTML与CSS中字符串字面量完全一致，避免全角/半角、不可见字符、编码差异等问题，且CSS文件须保存为UTF-8无BOM格式。
属性选择器对中文值的支持情况
CSS 属性选择器本身不区分中英文，[data-name="用户中心"] 这样的写法在现代浏览器中完全合法且能正常匹配。但实际使用时，常见问题不是语法不支持，而是 HTML 中的属性值与 CSS 选择器里的字符串**字面量不一致**——比如空格、全角/半角标点、不可见字符（如零宽空格）、编码差异（UTF-8 BOM 或服务端注入乱码）。
确保 HTML 中的属性值和 CSS 里写的字符串一模一样是前提。建议直接复制粘贴 HTML 源码中的值到 CSS 里，而不是手动输入中文。
匹配含中文的属性值时的常见错误
- HTML 中用了全角引号或空格：
<div data-tab="首页"> 写成 <div data-tab="首页 ">（末尾是全角空格），CSS 写 [data-tab="首页"] 就失效
- 服务端模板渲染时未正确转义，导致属性值里混入换行或制表符，而 CSS 字符串无法跨行书写
- 使用了属性存在选择器
[data-role] 误以为能匹配任意含中文的值，其实它只检查属性是否存在，不校验值内容
- 把中文当正则用，比如写
[data-status~="待审核"] 却没确认该属性是否用空格分隔多个值（~=` 是空格分隔匹配，不是模糊匹配）</li></ul><H3>需要模糊匹配中文时的替代方案</p>
CSS 原生不支持正则或子串匹配中文（如“包含‘订单’二字”）。如果必须实现类似效果，有且仅有两个可行路径：
<p>一是改用属性值前缀/后缀/子串匹配的伪类（仅适用于已知固定结构的场景）：</p><ul><li><code>[data-title^="订单"]
—— 匹配以“订单”开头的值
-
[data-title$="完成"] —— 匹配以“完成”结尾的值
-
[data-title*="支付"] —— 匹配值中任意位置包含“支付”的字符串（注意：这个 * 是子串匹配，不是通配符，且对大小写敏感）
<div data-tab="首页"> 写成 <div data-tab="首页 ">（末尾是全角空格），CSS 写 [data-tab="首页"] 就失效[data-role] 误以为能匹配任意含中文的值，其实它只检查属性是否存在，不校验值内容[data-status~="待审核"] 却没确认该属性是否用空格分隔多个值（~=` 是空格分隔匹配，不是模糊匹配）</li></ul><H3>需要模糊匹配中文时的替代方案</p> CSS 原生不支持正则或子串匹配中文（如“包含‘订单’二字”）。如果必须实现类似效果，有且仅有两个可行路径： <p>一是改用属性值前缀/后缀/子串匹配的伪类（仅适用于已知固定结构的场景）：</p><ul><li><code>[data-title^="订单"]—— 匹配以“订单”开头的值
[data-title$="完成"] —— 匹配以“完成”结尾的值[data-title*="支付"] —— 匹配值中任意位置包含“支付”的字符串（注意：这个 * 是子串匹配，不是通配符，且对大小写敏感）二是放弃纯 CSS，改用 JavaScript 动态添加 class：document.querySelectorAll('[data-type]').forEach(el => { if (el.dataset.type.includes('退款')) el.classList.add('is-refund') })，再用 .is-refund 写样式。
兼容性与性能提醒
所有上述属性选择器（^=、$=、*=）在 IE7+ 都支持，但 IE8 及更早版本对 Unicode 字符（包括大部分中文）的解析不稳定，若需兼容老 IE，应避免直接在选择器中写中文，改用英文 token + data-* 映射。
立即学习“前端免费学习笔记（深入）”；
另外，大量使用 *= 选择器可能轻微拖慢样式计算（尤其在深层嵌套或节点数过万时），生产环境慎用于高频更新的列表项。
最常被忽略的一点：CSS 文件保存编码必须是 UTF-8 无 BOM，否则中文字符串会被解析为乱码，选择器彻底失效。
