CSS实现选中文本颜色反转效果失效问题求助

失效原因 #

1. 你首次编写的代码存在属性名拼写错误：fiter 应为 filter
2. 浏览器对::selection伪元素的可支持属性有严格限制，仅支持color、background-color、text-shadow等少数属性，直接给::selection设置filter不会生效，固定色值的写法也无法适配不同原色的文本。

解决方案 #

使用mix-blend-mode: difference即可实现选中区域颜色自动反转的效果，代码如下：

::selection {
  background-color: white;
  color: black;
  mix-blend-mode: difference;
}

将你测试代码中原有的::selection规则替换为以上代码即可生效：

• 原本黑字白底的.p1选中后会变为白字黑底
• 原本红字白底的.p2选中后会变为青字黑底
• 原本青字黑底的.p3选中后会变为红字黑底
  完全匹配自动适配不同原文本颜色的需求。

兼容性说明 #

该写法兼容Chrome、Firefox、Safari等所有主流现代浏览器，无需额外添加私有前缀。

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