使用:: selection selector更改所有子项的选择颜色

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;
}