data-*属性必须配合属性选择器才能被CSS读取，否则不生效；如需样式响应，须显式写[data-status="error"]等选择器，且注意大小写、特殊字符转义及布尔属性匹配方式。
data-* 属性必须配合属性选择器才能被 CSS 读取
HTML 的 data- 属性本身不触发样式，CSS 不会自动响应它的存在——你得显式用 [data-theme]、[data-status="error"] 这类属性选择器去“抓取”它，否则写了等于没写。
常见错误现象：在 <div data-loading="true"> 上加了属性，但 div { opacity: 0.5; } 并不会生效；必须写成 div[data-loading="true"] { opacity: 0.5; } 才起作用。
- 属性值含特殊字符（如点、冒号）必须转义：
[data-user-id="123\.456"]，否则匹配失败 - 布尔型写法（
data-disabled无值）只能用[data-disabled]匹配，不能写[data-disabled=""]—— 后者只匹配显式赋空字符串的场景 - 大小写敏感：HTML 中写
data-Mode="dark"，CSS 里写[data-mode="dark"]就不匹配（HTML 属性名默认小写解析）
title 属性无法用 CSS 直接控制提示框样式
title 是纯语义属性，浏览器原生 tooltip 的外观（字体、颜色、延迟、位置）完全由 UA 样式控制，CSS 无法通过 [title] 选择器修改其弹出层表现。
如果你需要定制提示效果，必须放弃 title，改用 data-tooltip + 自定义 DOM + CSS 定位：
立即学习“前端免费学习笔记（深入）”；
- 用
data-tooltip="保存成功"存内容 - 用
span[data-tooltip]:hover::after生成伪元素气泡 - 手动控制
content: attr(data-tooltip)、position: absolute、z-index等 - 注意：伪元素无法响应鼠标事件，需额外加
pointer-events: none避免遮挡底层交互
id 和 class 在选择器中权重不同，但 data-* 属性权重与 class 相同
id 选择器（#header）权重是 100，class 和 [data-*] 都是 10 —— 这意味着 [data-state="active"] 和 .active 在层叠中地位等同，容易被同级规则覆盖。
典型踩坑场景：
- 写了
.btn { background: #ccc; }和[data-pending] { background: #999; }，但按钮始终灰色——因为二者权重一样，后声明的胜出，顺序错了 - 想让
[data-pending]强制生效？要么提升选择器复杂度：button[data-pending]（权重 11），要么加!important（不推荐） - 别混用
id和data-id做同一用途：一个用于 JS 查找（getElementById），一个用于 CSS 控制（[data-id="123"]），职责分离更清晰
全局属性对可访问性的影响会绕过 CSS 视觉控制
aria- 和 role 属于全局属性，它们改变的是辅助技术（屏幕阅读器）的行为逻辑，和 CSS 渲染无关。即使你用 [aria-hidden="true"] 隐藏了元素，它仍可能被读屏软件播报——除非同时加 display: none 或 visibility: hidden。
关键细节：
-
aria-hidden="true"只影响语义树，不影响视觉渲染；要真正隐藏，CSS 必须同步作用 -
role="button"不会让元素获得:hover或:focus，必须手动加tabindex="0"并监听键盘事件 -
data-属性完全不参与可访问性树，别指望它替代aria-；二者定位不同：data-是给 JS/CSS 用的私有元数据，aria-是给辅助技术用的标准接口
实际项目里最容易被忽略的，是把 data- 当成“开关”直接用，却忘了它既不触发重排也不自带过渡——所有状态变化都得靠你手写 CSS 规则和 transition 声明，否则切换时就是生硬跳变。
