如何编写CSS规则还原::selection节点的默认背景样式

页面里被注入了无法修改的CSS，用::selection给元素设置了自定义背景色，想让元素回到浏览器默认的文本选中状态时，直接用background-color: initial会导致背景透明，根本看不到选中的文本。

解决这个问题的关键是用CSS的系统颜色关键字highlight，它会自动匹配用户系统/浏览器设置的默认文本选中背景色，完美还原原生选中效果：

代码示例 #

<style>
div::selection { background-color:red; }

/* 撤销自定义选中背景，恢复默认样式 */
div::selection {
  background-color: highlight !important;
}
</style>
<div>This is text</div>

如果需要让页面所有元素都恢复默认选中样式，可以用通配符选择器：

*::selection {
  background-color: highlight !important;
}

原理很简单：highlight是CSS内置的系统颜色变量，它的值就是用户当前环境下的默认文本选中背景色，完全替代了initial带来的透明问题，精准还原未被修改前的原生状态。

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