

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

### 1. 语法与基础
#### HTML 示例
```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：根据状态设置颜色
```css
div[data-status="active"] {
    color: green;
}
div[data-status="pending"] {
    color: orange;
}
div[data-status="error"] {
    color: red;
}
```
#### 示例 2：根据部分属性值匹配
```css
div[data-status*="pen"] {
    background-color: #fff3cd;
}
```
> 只要属性值包含 `pen`，就会被选中。
#### 示例 3：结合伪元素动态显示内容
```css
div[data-status]::after {
    content: " (" attr(data-status) ")";
    color: gray;
}
```
> 会在元素后面动态显示 `data-status` 的值，如“Active Status (active)”。

### 3. 高级用法
#### 结合 JavaScript 动态修改状态
```javascript
document.querySelector('div').setAttribute('data-status', 'error');
```
> 通过 JS 动态修改属性值，CSS 会自动应用新样式。
#### 多值属性匹配
如果 `data-status` 有多个值（用空格分隔），例如：
```html
<div data-status="active primary">Active and Primary</div>
```
可以用：
```css
div[data-status~="active"] {
    font-weight: bold;
}
```
> 只要属性值中包含独立的 `active`，就会被选中。

### 4. 伪元素 `attr()` 函数说明
`attr()` 函数目前只能用于 `content` 属性，用于在伪元素中显示属性值，如：
```css
div::before {
    content: attr(data-status);
}
```
> 但无法直接用于 `left`、`width` 等属性。如需动态控制这些属性，推荐使用 CSS 变量（`--var`）或 JS。

### 5. 兼容性与注意事项
- 所有现代浏览器均支持 `data-*` 属性和 CSS 属性选择器。
- IE8 及以上支持，但需声明 `<!DOCTYPE>`。
- `attr()` 目前仅能用于 `content`，未来 CSS 标准可能扩展。
---
### 6. 实战代码示例
```html
<!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>
```



## 总结
- `data-status` 是一种灵活的自定义属性，用于存储状态信息。
- CSS 属性选择器（如 `[data-status="value"]`）能根据属性值精准匹配并应用样式。
- 配合 `attr()` 可在伪元素中动态显示属性值。
- 适合用于组件状态管理、表单校验、交互反馈等场景。
如需更复杂的动态样式，可结合 CSS 变量或 JavaScript。




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

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

数据库

HTML5

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

CSS 中 `data-status` 的使用详解-腾讯云开发者社区-腾讯云

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐