html - 使用::selection 选择器更改所有子项的选择颜色

Question

我有两个 div 元素，其中包含任何类型的子元素(如 input 和 span)，我想更改选择颜色我的第一个 div 中的所有子元素为 red，第二个 div 为黄色。

以下不不工作:

#my-div-1::selection
{
  background-color: red;
}

#my-div-2::selection
{
  background-color: yellow;
}

我不能不这样使用选择器:

::selection
{
  background-color: yellow;
}

因为这会覆盖第二个 div 的颜色并应用于整个文档。

Answer 1

您需要选择所有应应用选择器的子元素。您可以改为编写以下内容:

#my-div-1 *::selection
{
  background-color: red;
}

#my-div-2 *::selection
{
  background-color: yellow;
}