ProseMirror 中如何自定义选中状态的样式？

宇文博硕提问于 2026-03-11 00:48:21 阅读 89

交互

我在用 ProseMirror 做一个富文本编辑器，想改一下节点被选中时的高亮背景色，但默认的蓝色太刺眼了。查了文档说可以通过 CSS 覆盖，但我试了没生效，是不是我写错了？

我加了这段样式：

.ProseMirror .selected {
  background-color: #f0f9ff !important;
}

但选中文本时还是原来的蓝色，完全没变，是不是类名不对？或者 ProseMirror 用了别的机制？

富文本编辑

我来解答赞 16 收藏

反馈

1 条解答

欧阳庆芳 Lv1

类名写错了，不是 .selected，是 .ProseMirror-selectednode。

ProseMirror 给选中节点加的是这个类名，你可以试试：

.ProseMirror .ProseMirror-selectednode {

  background-color: #f0f9ff !important;

}

另外如果你是想改文本选中的高亮颜色（就是鼠标拖蓝那种），那个是浏览器的原生 selection 样式，得用伪元素：

.ProseMirror ::selection {

  background-color: #f0f9ff;

}

这两个不一样的，节点选中是光标放在某个块上（比如图片、卡片）时显示的背景，文本选中是拖拽选中的文字。看你具体想改哪个。

如果还是没生效，检查一下你的 CSS 文件有没有正确引入，以及选择器优先级够不够。实在不行就加 !important 硬刚，先确认样式写对了再说。

2026-03-11 01:01