css 仅识别 data- 开头、后接小写字母数字和短横线的属性，如 data-user-id；驼峰 data-userid 会被转为 data-userid 导致选择器匹配失败，需统一用小写+短横线命名。
data-* 属性怎么写才被 CSS 识别
浏览器只认 data- 开头、后面跟字母数字和短横线（-）的属性，中间不能有下划线、点、空格或大写字母。比如 data-user-id 合法，data_userId 或 data-user id 都会被忽略。
常见错误现象：div[data-userId="123"] 选不到元素——因为 HTML 里写了 data-userId="123"，但浏览器自动转成小写后，属性名其实是 data-userid，而 CSS 选择器区分大小写，匹配失败。
- HTML 中一律用小写字母 + 短横线，如
data-modal-type、data-api-version - 避免用
data-后直接跟数字（如data-123），部分旧版 Safari 可能不解析 - 值建议用双引号包裹，尤其含空格或特殊字符时：
data-status="pending review"
[data-\*] 选择器写法与常见漏配场景
基础语法是 [data-name]（存在该属性）、[data-name="value"]（完全匹配）、[data-name~="value"]（空格分隔的单词之一）、[data-name*="val"]（子串包含）。别想当然套用 class 逻辑。
使用场景：按钮状态控制、组件变体切换、调试标记样式。比如给所有带 data-env="staging" 的容器加红色边框，方便测试环境一眼识别。
立即学习“前端免费学习笔记（深入）”；
-
[data-loading]匹配任意有该属性的元素，不管值是什么——适合布尔型开关 -
[data-role="button"]要求值完全等于"button"，"primary-button"不匹配 -
[data-class*="error"]可匹配data-class="form-error-input"，但性能略差，慎用于高频重绘区域
React/Vue 中动态设置 data-\* 的坑
框架会把驼峰式 prop 自动转为短横线命名，但仅限于已知 HTML 属性。自定义 data- 属性必须显式声明，否则可能被过滤或转义。
常见错误现象：Vue 模板中写 :data-user-id="uid" 报 warning；React 中 data-user-id={uid} 渲染后属性消失——本质是 JSX 对非标准属性更严格。
- Vue 3：用
v-bind="{ 'data-user-id': uid }"或模板字面量data-user-id="{{ uid }}" - React：确保用字符串键，
{"data-user-id": uid}，别写成dataUserId（JSX 不识别） - Svelte：直接
data-user-id={uid}即可，但值为null或undefined时属性不会渲染，不是空字符串
兼容性与性能要注意什么
[data-\*] 选择器 IE7+ 全支持，但老版本 IE 对属性值含引号或特殊字符解析不稳定。现代项目基本不用操心兼容性，但性能值得多看一眼。
性能影响主要来自两点：一是选择器本身比 .class 或 #id 慢（浏览器需遍历属性而非类表），二是过度依赖它做状态驱动样式，容易引发隐式重排。
- 避免在
:hover或动画关键帧里用[data-active]切换复杂样式，改用 class 更稳妥 - 大量列表项用
[data-index]做样式区分？不如用:nth-child()或预设 class - 调试时临时加
data-debug没问题，但上线前建议移除，减少 DOM 体积和样式引擎负担
真正麻烦的是嵌套层级深 + 多个 [data-\*] 连用，比如 section[data-type="form"] [data-required][data-validated="false"]——这种组合既难维护，也容易因一个属性没设对就全线失效。
