窗口非活动状态样式

您可以使用::selection 和 ::-moz-selection 自定义文本被选中时的文本颜色和背景颜色。我们已经在这里多次讨论过 一些 方法，并以 各种形式 展示，这是一个很酷的小技巧。

甚至 HTML5 Boilerplate 在默认情况下也包含了它，使用了超级粉红色，这是发现样板网站的最简单方法=）。

但是，当您将文本选择样式更改为非默认样式时，您将失去默认样式在窗口失去焦点时自动降低饱和度的功能。请看

我更喜欢默认的降低饱和度，使其视觉效果不那么强烈的方式。毕竟，您很有可能现在正专注于另一个窗口，并不需要背景窗口争夺注意力。

也许这是一个鲜为人知的事实，但是您可以将伪选择器与::selection 结合使用，以便在窗口处于非活动状态时应用样式。它使用:window-inactive 伪选择器，如下所示

::selection {
  background: hsl(136,65%,45%);
  color: white;
}
::selection:window-inactive {
  background: hsl(136,25%,65%);
}

使用HSL作为颜色值，我能够降低饱和度并增加亮度，从而获得相同色调的强度较低的版本。

请记住，Firefox 有自己的 ::selection 版本，即 ::-moz-selection。它也有自己的 :window-inactive 版本，即 :-moz-window-inactive。不幸的是，将这些东西放在一起使用不起作用。

/* Does work */
::-moz-selection {
  background: rgba(255,0,0,0.9);
  color: white;
}
/* Doesn't work */
::-moz-selection:-moz-window-inactive {
  background: rgba(255,0,0,0.3);
}
/* Nor this */
:-moz-window-inactive::-moz-selection {
  background: rgba(255,0,0,0.3);
}

所以无论如何，您至少可以在 Firefox (3.6+ ?) 中获得自定义文本选择颜色，但您无法为窗口非活动状态专门设置样式。**但是**，Firefox (已测试 3.6 和 4) 在窗口失去焦点时会自动将文本选择颜色更改为灰色。

需要注意的是，这不是因为 :-moz-window-inactive 不起作用，它确实起作用，您实际上可以在任何元素上使用它，例如在该状态下更改 div 的背景颜色。只是将它们放在一起使用不起作用。

这不是我们可以对浏览器供应商挥舞拳头的情况。**这些都没有标准化。** ::selection 不是标准。:window-inactive 不是标准。事实上，::selection 在技术上实际上是一个伪元素而不是伪选择器，因此它应该在选择器中最后出现，但是如果您将它们互换位置，它将不起作用。

不仅仅是文本选择

如果 :window-inactive 被标准化并得到更广泛的支持，那么您可以用它做更多的事情，而不仅仅是处理文本选择颜色。想象一下将整个网站灰度化或停止动画。