---
title: "样式"
description: "使用 CSS 数据属性为 Tiptap 追踪更改扩展中的建议标记添加样式。"
canonical_url: "https://tiptap.zhcndoc.com/tracked-changes/api-reference/styling"
---

# 样式

使用 CSS 数据属性为 Tiptap 追踪更改扩展中的建议标记添加样式。

建议标记渲染为带有数据属性的 `<span>` 元素，可通过 CSS 定向。

## CSS 选择器

```css
/* 所有建议 */
[data-suggestion] {
  /* 所有建议的基础样式 */
}

/* 插入 */
[data-suggestion-type="add"] {
  background-color: rgba(0, 255, 0, 0.2);
  text-decoration: underline;
}

/* 删除 */
[data-suggestion-type="delete"] {
  background-color: rgba(255, 0, 0, 0.2);
  text-decoration: line-through;
}

/* 替换删除（被替换的旧文本） */
[data-suggestion-type="replaceDeletion"] {
  background-color: rgba(255, 0, 0, 0.2);
  text-decoration: line-through;
}

/* 替换插入（替换旧文本的新文本） */
[data-suggestion-type="replaceInsertion"] {
  background-color: rgba(0, 255, 0, 0.2);
  text-decoration: underline;
}

/* 按用户样式化建议 */
[data-suggestion-user="user-123"] {
  border-bottom: 2px solid blue;
}
```

## 可用的数据属性

| 属性                              | 描述                                                            |
| ------------------------------- | ------------------------------------------------------------- |
| `data-suggestion`               | 建议标记元素上始终存在                                                   |
| `data-suggestion-id`            | 唯一建议 ID                                                       |
| `data-suggestion-type`          | `'add'`、`'delete'`、`'replaceDeletion'` 或 `'replaceInsertion'` |
| `data-suggestion-user`          | 创建建议的用户 ID                                                    |
| `data-suggestion-created`       | 建议创建时的 ISO 时间戳                                                |
| `data-suggestion-user-metadata` | JSON 序列化的用户元数据对象（仅在设置了 `userMetadata` 时存在）                    |

## 已知限制

此扩展处于积极开发中，未来几个月将会有重大变更。已知以下限制，未来版本会予以解决：

- 属性或标记的更改（如切换加粗、修改链接 URL）不会被追踪
- 节点类型的更改（如将段落转换为标题）不会被追踪
- 插入新行或移除基于文本的节点（如删除整个段落）未被处理
- 没有明确的建议模式能单独渲染“干净”的文档版本与追踪版本并存