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

文章目录

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

概述

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>

7. 参考来源

总结

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

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

文章目录

概述

1. 语法与基础

HTML 示例

CSS 属性选择器匹配

2. 实际应用示例

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

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

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

3. 高级用法

结合 JavaScript 动态修改状态

多值属性匹配

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

5. 兼容性与注意事项

6. 实战代码示例

7. 参考来源

总结

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