当前位置：首页 > news >正文

CSS 中 `data-status` 的使用详解

news 2025/11/5 7:21:25

文章目录

- 概述
- - 1. 语法与基础
  - - HTML 示例
    - CSS 属性选择器匹配
  - 2. 实际应用示例
  - - 示例 1：根据状态设置颜色
    - 示例 2：根据部分属性值匹配
    - 示例 3：结合伪元素动态显示内容
  - 3. 高级用法
  - - 结合 JavaScript 动态修改状态
    - 多值属性匹配
  - 4. 伪元素 `attr()` 函数说明
  - 5. 兼容性与注意事项
  - 6. 实战代码示例
  - 7. 参考来源
- 总结

概述

data-status 是 HTML5 推出的自定义数据属性（data-*）之一，它允许在 HTML 元素上嵌入自定义数据，通常用于表示状态信息，如“active”“pending”“error”等。结合 CSS 属性选择器，可以灵活地为不同状态应用不同样式。

1. 语法与基础

HTML 示例

<div data-status="active">Active Status</div>
<div data-status="pending">Pending Status</div>
<div data-status="error">Error Status</div>

CSS 属性选择器匹配

[data-status]：选中所有带有 data-status 属性的元素。
[data-status="active"]：选中 data-status 属性值完全等于 active 的元素。
[data-status*="pen"]：选中属性值包含 pen 的元素。
[data-status^="act"]：选中属性值以 act 开头的元素。
[data-status$="ing"]：选中属性值以 ing 结尾的元素。

2. 实际应用示例

示例 1：根据状态设置颜色

div[data-status="active"] {color: green;
}
div[data-status="pending"] {color: orange;
}
div[data-status="error"] {color: red;
}

示例 2：根据部分属性值匹配

div[data-status*="pen"] {background-color: #fff3cd;
}

只要属性值包含 pen，就会被选中。

示例 3：结合伪元素动态显示内容

div[data-status]::after {content: " (" attr(data-status) ")";color: gray;
}

会在元素后面动态显示 data-status 的值，如“Active Status (active)”。

3. 高级用法

结合 JavaScript 动态修改状态

document.querySelector('div').setAttribute('data-status', 'error');

通过 JS 动态修改属性值，CSS 会自动应用新样式。

多值属性匹配

如果 data-status 有多个值（用空格分隔），例如：

<div data-status="active primary">Active and Primary</div>

可以用：

div[data-status~="active"] {font-weight: bold;
}

只要属性值中包含独立的 active，就会被选中。

4. 伪元素 `attr()` 函数说明

attr() 函数目前只能用于 content 属性，用于在伪元素中显示属性值，如：

div::before {content: attr(data-status);
}

但无法直接用于 left、width 等属性。如需动态控制这些属性，推荐使用 CSS 变量（--var）或 JS。

5. 兼容性与注意事项

所有现代浏览器均支持 data-* 属性和 CSS 属性选择器。
IE8 及以上支持，但需声明 <!DOCTYPE>。
attr() 目前仅能用于 content，未来 CSS 标准可能扩展。

6. 实战代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Data-Status Example</title><style>div[data-status="active"] {color: green;}div[data-status="pending"] {color: orange;}div[data-status="error"] {color: red;}div[data-status]::after {content: " (" attr(data-status) ")";color: gray;}</style>
</head>
<body><div data-status="active">Active Status</div><div data-status="pending">Pending Status</div><div data-status="error">Error Status</div>
</body>
</html>