data-* 属性选择器直接用[data-name]或[data-name="value"]匹配元素，浏览器原生支持；适用于表达不可见语义状态（如data-loaded），不替代class复用样式，需注意小写命名、引号包裹值、SSR一致性及合理控制导出状态。
data-* 属性选择器的基本写法
直接用 [data-name] 或 [data-name="value"] 就能匹配带对应 data 属性的元素，不需要额外声明或 JS 注册。浏览器原生支持，CSS 里写完就能生效。
比如给按钮加状态标识：
.btn[data-status="loading"] {
opacity: 0.6;
pointer-events: none;
}对应 HTML：
<button class="btn" data-status="loading">提交中</button>
注意：属性名必须小写（data-status ✅，data-Status ❌），值区分大小写（data-mode="Dark" 不会匹配 [data-mode="dark"]）。
立即学习“前端免费学习笔记（深入）”；
在组件通信中用 data 属性传递样式状态
Vue/React 组件本身不直接暴露 CSS 类名控制权，但可以通过 props 渲染 data- 属性，让样式层“感知”组件内部状态，避免硬编码 class 或依赖 scoped CSS 穿透。
- React 示例（JSX 中动态写入）：
<Card data-size={size} data-has-error={hasError ? "true" : undefined} /> - CSS 对应控制：
Card[data-size="large"] { font-size: 1.25rem; } Card[data-has-error="true"] { border-color: #e53e3e; } - Vue 中可绑定：
<input :data-valid="valid.toString()" />
，注意布尔值要转字符串，否则属性不会被渲染
和 class 切换比，data 属性选择器有什么实际区别
核心不是“能不能”，而是“该不该”——它更适合表达**不可见语义状态**，比如 data-loaded、data-pending、data-theme，而不是视觉修饰类如 .is-active。
- class 更适合复用样式片段（如
.text-sm、.bg-blue-500），data 属性更适合绑定组件生命周期或业务状态 - data 属性不会污染 class 列表，调试时更易定位来源（看 HTML 就知道是哪个组件传的）
- 性能无差异，现代浏览器对
[data-*]选择器优化得很好，但别写成div[data-id] [data-role="item"]这种深层嵌套，影响匹配效率
容易忽略的兼容性和限制
data- 选择器在 IE9+ 全支持，但有两点常踩坑：
- 属性值含空格或特殊字符时，必须用引号包裹选择器：
[data-tip="click me"]✅，[data-tip=click me]❌（只匹配到click） - 不能用属性选择器做“部分匹配”，比如想选
data-id以user-开头的元素，得用[data-id^="user-"]，而不是[data-id~="user"]（后者是空格分隔的单词匹配） - 服务端渲染（SSR）时如果 data 属性由客户端 JS 动态添加，初始样式不会生效——必须确保服务端也输出对应 data 属性
真正难的不是语法，是决定哪些状态值得提升为 data 属性。太多会导致 HTML 膨胀，太少又失去语义表达力。建议只导出那些会影响布局、尺寸、交互禁用等关键样式分支的状态。
