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 穿透。

JS X Monitor

X.com (Twitter) 账号监控自动化：定时抓取指定账号最新推文，发现新内容即时推送通知。

下载

• React 示例（JSX 中动态写入）：

  <card data-size="{size}" data-has-error="{hasError" : undefined></card>

• 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 膨胀，太少又失去语义表达力。建议只导出那些会影响布局、尺寸、交互禁用等关键样式分支的状态。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！