如何使用::selection伪元素正确显示颜色？Chrome兼容问题

我之前在Mac上的Chrome 74版本碰到过一模一样的问题，这确实是该版本浏览器的一个特定渲染Bug——它没能完全覆盖默认的选中高亮半透明蓝色叠加层，导致自定义的红色看起来偏蓝发暗。下面是几个亲测有效的解决方案：

方案1：强制禁用背景混合模式 #

Chrome在Mac上的默认选中样式会用半透明蓝色和自定义背景色做混合，我们可以通过强制设置background-blend-mode: normal和opacity: 1来打断这个混合逻辑：

div::selection {
  color: white;
  background-color: red;
  background-blend-mode: normal;
  opacity: 1;
}

方案2：添加-webkit前缀兼容旧WebKit内核 #

虽然现代Chrome已经支持标准的::selection，但针对74这个旧版本，加上带前缀的伪类可以确保样式被正确识别：

div::selection,
div::-webkit-selection {
  color: white;
  background-color: red;
}

方案3：微调颜色抵消叠加影响 #

如果上面的方法都不生效，可以尝试调整自定义红色的色调，抵消默认蓝色叠加的影响。比如把red换成偏橙的红色#e63946，混合后的颜色会更接近你预期的纯红。

另外补充一下：这个Bug在Chrome后续的版本中已经被官方修复了，如果你的使用场景允许升级浏览器，这也是最彻底的解决办法。Firefox没有这个问题是因为它的选中样式渲染逻辑和Chrome不同，不会保留额外的叠加层。

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