使用 CSS 覆盖默认文本选择颜色

您可以使用的一个很酷的 CSS3 声明是 ::selection，它会用您选择的颜色覆盖浏览器级别或系统级别的文本高亮颜色。在撰写本文时，只有 Safari 和 Firefox 支持此功能，并且两者使用的方式略有不同。幸运的是，这可以被认为是一种“前向增强”技术。对于使用现代浏览器的用户来说，这是一个不错的功能，但在其他浏览器中会被忽略，这也不是什么大问题。

这就是问题所在

::selection {
  background: #ffb7b7; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #ffb7b7; /* Gecko Browsers */
}

在选择器内部，color 和 background 是唯一有效的属性。为了增加一些趣味性，您可以更改不同段落或页面不同部分的选择颜色。

查看演示

我所做的只是对具有不同类的段落使用不同的选择颜色

p.red::selection {
  background: #ffb7b7;
}
p.red::-moz-selection {
  background: #ffb7b7;
}
p.blue::selection {
  background: #a8d1ff;
}
p.blue::-moz-selection {
  background: #a8d1ff;
}
p.yellow::selection {
  background: #fff2a8;
}
p.yellow::-moz-selection {
  background: #fff2a8;
}

请注意，即使样式块执行相同的操作，选择器也不会组合在一起。如果您将它们组合在一起，则不起作用。

/* Combining like this WILL NOT WORK */
p.yellow::selection,
p.yellow::-moz-selection {
  background: #fff2a8;
}

这是因为如果选择器的一部分浏览器无法理解或无效，则浏览器会忽略整个选择器。对此有一些例外情况（IE 7？），但与这些选择器无关。

---

为了获得更疯狂的趣味性，您可以在文本选择时显示图像。