css - 如何设置自定义::selection 样式但保留浏览器默认的文本选择颜色？

Question

只是遇到了一些令人惊讶的事情。如果你这样做:

footer::selection {
  color: white;
}

...它还删除了突出显示文本的浏览器默认背景颜色。它的行为就像您还设置了 background-color: transparent . (见下面的演示。)
问题:如何保留或恢复 系统默认文本选择 background-colour设置自定义时 ::selection color ?
(这个 answer 列出了在不同系统上使用的各种选择背景颜色。但我不想只选择一种，我希望它只是当前系统的默认值。)
演示:

body {
  background: navy;
  color: gray;
}

p.custom::selection {
  color: white;
}

<p>Regular paragraph</p>
<p class="custom">Paragraph with text color changed in ::selection</p>

Answer 1

此行为已被编入规范，as follows :

The UA must use its own highlight colors for ::selection only when neither color nor background-color has been specified by the author.

(这曾经是说“应该”，直到去年它被改为“必须”。没有任何浏览器实现了某些版本的 ::selection 无论如何都没有遵循这个规则。)
系统颜色仅作为用户定义的值(可能只是也可能不只是系统默认值)暴露给 CSS，而不是系统定义的默认值，因此无法提前知道。因此，正如 CBroe 暗示的那样，此规则是为了确保仅更改一个不会导致它与另一个的用户定义值发生冲突，从而导致对比度问题。规范中对这条规则的实际编纂是出于遗留原因，但首先在讨论中引用了浏览器行为的基本原理，例如 this one .
有多个 standardized以及存在的非标准系统颜色，但这些颜色的行为因浏览器和平台而异。尝试使用其中任何一种都可能会产生意想不到的结果，从使用了意想不到的颜色，到被浏览器完全忽略。另外，正如我所提到的，系统颜色无论如何都只作为用户定义的值公开。 CSSWG 之前已经讨论过改进这一点的潜在方法； here's a recent conversation .
鼓励您应用自定义选择背景颜色，以补充您的自定义选择前景色。