如何使用CSS移除文本选中高亮颜色（块级笔记编辑器场景）

解决方案 #

1. 添加CSS规则控制文本选中高亮

使用::selection伪类直接覆盖浏览器默认的文本选中样式，当块选中遮罩层加载对应类时，自动让内部文本选中效果透明：

/* 适配Webkit内核浏览器 */
.block-selected-halo.block-selected + p::selection {
  background: transparent;
  color: inherit;
}
/* 兼容火狐浏览器 */
.block-selected-halo.block-selected + p::-moz-selection {
  background: transparent;
  color: inherit;
}

如果存在样式优先级冲突，可以给选择器增加父类前缀提升权重，比如改为.paragraph-block .block-selected-halo.block-selected + p::selection。

2. 触发块选中时主动清除已有文本选区

user-select: none仅能阻止后续的文本选中操作，对用户已经完成的文本选区不生效，因此后追加类样式时没有效果。需要在触发块选中状态的逻辑中，主动清除当前全局文本选区：
在判定showSelectedHalo返回true或者allSelected设为true的逻辑位置，添加如下代码：

window.getSelection().removeAllRanges()

内容的提问来源于stack exchange，提问作者Rohan Keskar18