td:before { content: attr(data-title); }
啥意思？这个attr是干啥的，规定好的，还是自定义的
attr(data-title) 完全解析
一、这句话的整体意思
css
td:before {
content: attr(data-title);}翻译成人话：
"在每个
<td>单元格的内容前面，插入一个虚拟元素，这个虚拟元素显示的文字内容，是从当前<td>标签的data-title属性中读取过来的。"
二、attr() 是什么？
1. attr() 是 CSS 的内置函数（规定好的）
| 类型 | 说明 |
|---|---|
| 全称 | attribute（属性）的缩写 |
| 性质 | CSS 原生函数，就像 rgb()、url()、calc() 一样 |
| 作用 | 读取 HTML 元素的属性值 |
| 语法 | attr(属性名) |
2. 类比理解
css
/* 就像 JavaScript 中的 getAttribute() */element.getAttribute('data-title');/* 就像 Python 中的 get() */element.get('data-title');attr() 就是 CSS 世界里读取 HTML 属性的"专用工具"。
三、attr() 能读取哪些属性？
✅ 可以读取任何属性（但有限制）
css
/* 读取标准属性 */td:before { content: attr(class); } /* 读取 class 属性 */td:before { content: attr(id); } /* 读取 id 属性 */td:before { content: attr(title); } /* 读取 title 属性 */a:before { content: attr(href); } /* 读取链接地址 *//* 读取自定义属性（推荐） */td:before { content: attr(data-title); } /* 读取 data-title */td:before { content: attr(data-name); } /* 读取 data-name */td:before { content: attr(data-anything); } /* 任意自定义属性 */四、data-title 是什么？
1. data-title 是自定义属性
| 对比 | 标准属性 | 自定义属性 |
|---|---|---|
| 例子 | class、id、title、href | data-title、data-name、data-id |
| 是否规定 | HTML 规范规定好的 | 开发者自己起的名字 |
必须以 data- 开头 | 否 | 是（必须） |
| 用途 | 浏览器有特殊用途 | 存储页面自定义数据 |
2. 为什么叫 data-title 而不是 title？
html
<!-- 如果用 title 属性 --><td title="序号">1</td><!-- 问题：title 属性浏览器有特殊用途（鼠标悬停显示提示框） --><!-- 所以用 data-title --><td data-title="序号">1</td><!-- 优点：不会与浏览器功能冲突，专门用来存数据 -->
命名规则：
必须以
data-开头后面可以跟任何名字：
data-title、data-label、data-column-name等
五、完整的工作流程图
text
第1步：在 HTML 中设置属性
┌─────────────────────────────────────┐
│ <td data-title="序号">1</td> │
│ ↑ │
│ └─ 自定义属性，值="序号" │
└─────────────────────────────────────┘
第2步：CSS 中用 attr() 读取
┌─────────────────────────────────────┐
│ td:before { │
│ content: attr(data-title); │
│ ↑ │
│ └─ 读取 data-title 的值 │
│ } │
└─────────────────────────────────────┘
第3步：浏览器渲染
┌─────────────────────────────────────┐
│ 原始 HTML：<td data-title="序号">1</td> │
│ │
│ CSS 插入伪元素后，相当于： │
│ <td> │
│ <before>序号</before> ← 虚拟元素 │
│ 1 │
│ </td> │
│ │
│ 最终显示：序号 1 │
└─────────────────────────────────────┘六、实际代码示例
html
<!DOCTYPE html><html><head>
<style>
/* 用 attr() 读取不同属性 */
.demo1:before { content: attr(data-name); }
.demo2:before { content: attr(data-label); }
.demo3:before { content: attr(title); }
.demo4:before { content: attr(class); }
/* 添加样式让伪元素更明显 */
[class^="demo"]:before {
background: yellow;
font-weight: bold;
margin-right: 10px;
padding: 2px 5px;
}
</style></head><body>
<div class="demo1" data-name="用户名">张三</div>
<!-- 显示：用户名 张三 -->
<div class="demo2" data-label="年龄">25岁</div>
<!-- 显示：年龄 25岁 -->
<div class="demo3" title="提示信息">鼠标悬停看提示</div>
<!-- 显示：提示信息 鼠标悬停看提示 -->
<div class="demo4">我自己的class是demo4</div>
<!-- 显示：demo4 我自己的class是demo4 --></body></html>七、attr() 的局限性（重要！）
目前 attr() 只能在 content 属性中使用，不能在其他地方用：
css
/* ✅ 可以用 */td:before { content: attr(data-title); }/* ❌ 不能用（虽然 CSS3 规范有，但浏览器不支持） */div {
width: attr(data-width); /* 无效 */
color: attr(data-color); /* 无效 */
background: attr(data-bg); /* 无效 */}未来展望：CSS3 规范计划让 attr() 可以用在任何属性上，但目前只有 content 支持得好。
八、为什么用 data-* 而不是其他属性？
| 方案 | 代码 | 问题 |
|---|---|---|
| 用标准属性 | <td title="序号">1</td> | title 有特殊用途（提示框） |
| 用自定义属性（非data-） | <td my-title="序号">1</td> | 不符合 HTML5 规范，可能报错 |
| 用 data- 属性* | <td data-title="序号">1</td> | ✅ 标准、规范、无冲突 |
HTML5 规定：所有自定义数据应该使用 data-* 属性。
九、完整对照表
| 概念 | 类型 | 是否规定 | 例子 |
|---|---|---|---|
attr() | CSS 函数 | 规定好的（CSS 原生） | attr(data-title) |
data-title | HTML 属性名 | 自定义的（开发者起名） | data-title="序号" |
data- 前缀 | HTML 规范 | 规定好的（必须这样写） | data-xxx |
关系图：
text
CSS 世界 HTML 世界 ┌─────────────┐ ┌─────────────┐ │ attr() │ ───读取───→ │ data-title │ │ (规定好的) │ │ (自定义的) │ └─────────────┘ └─────────────┘ ↑ ↑ └─ 内置函数，CSS 提供的 └─ 开发者起的名字
十、快速记忆
| 问题 | 答案 |
|---|---|
attr() 是啥？ | CSS 内置函数，专门读取 HTML 属性值 |
| 是规定好的吗？ | 是，CSS 规范规定的函数 |
data-title 是啥？ | 开发者自定义的 HTML 属性名 |
| 是规定好的吗？ | 不是，开发者自己起的（但必须 data- 开头） |
| 整体意思？ | 读取 data-title 属性的值，作为伪元素的内容 |
记忆口诀：
"attr 是 CSS 内置函数，专门读取属性值；data-title 自定义名，开发者自己起；两者配合生成标签，手机显示更清晰"