::selection

用光标选择这句话。注意，当您选择文本时，背景颜色如何填充空格？您可以通过为 ::selection 设置样式来更改选定文本的背景颜色和颜色。为这个伪元素设置样式非常适合将用户选择的文本与网站的配色方案相匹配。

p::selection {
  background: #fff;
  color: #ff0000;
}

请注意，尽管 其他伪元素接受单个冒号，但此伪元素的语法中需要使用双冒号。

如上所见，您可以为单个元素设置 ::selection 的样式。您也可以通过将裸伪元素放在样式表中来为整个页面设置样式。

::selection { background: yellow; }

::selection 只能与三个属性一起使用。

• color
• background（特别是 background-color、background-image 长手属性）
• text-shadow

如果您尝试使用列表中未列出的属性为 ::selection 设置样式，则该属性将被忽略。在列表中看到 background 可能很棘手，因为该属性仅在应用于 ::selection 时才会呈现颜色，它不会呈现背景图像或渐变。

也不要尝试这样做。

p::-moz-selection,
p::selection { color: red; }

当浏览器找到它们不理解的选择器部分时，它们会放弃整个选择器，因此这将始终失败。

::selection 最有用的用途之一是在选择时关闭 text-shadow。text-shadow 可能与选择的背景颜色冲突，使文本难以阅读。设置 text-shadow: none; 使文本在选择时清晰易读。

花哨的 ::selection

与 Sass 或任何其他预处理器配对，您可以使用 ::selection 创建非常酷的效果。选择以下演示中的文本。

您可能会注意到，在某些浏览器中，效果并不那么平滑。让我们将这个演示归类为：可能的事情，但可能只是为了好玩。

另一个愚蠢但有趣的技巧是 通过选定文本显示图像。

浏览器支持

更多信息

• CSS 伪元素模块级别 4 规范
• MDN

相关