CSS 中 `data-status` 的使用详解
CSS 中 `data-status` 的使用详解
木易士心
发布于 2025-11-30 10:09:54
发布于 2025-11-30 10:09:54
概述
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>7. 参考来源
- CSS 属性选择器详解 - W3School
- CSS 属性选择器 - 菜鸟教程
- HTML5 data-* 属性 - 亿速云
- CSS attr() 函数 - 菜鸟教程
总结
data-status是一种灵活的自定义属性，用于存储状态信息。- CSS 属性选择器（如
[data-status="value"]）能根据属性值精准匹配并应用样式。 - 配合
attr()可在伪元素中动态显示属性值。 - 适合用于组件状态管理、表单校验、交互反馈等场景。 如需更复杂的动态样式，可结合 CSS 变量或 JavaScript。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-11-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号