::selection

概述

::selection CSS伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。

只有一小部分CSS属性可以用于 : :selection 选择器： color, background-color, cursor, outline, text-decoration, text-emphasis-color和text-shadow。要特别注意的是，background-image 会如同其他属性一样被忽略。

示例

只有Gecko 引擎需要加前缀（-moz） 。因为CSS解析规则要求在匹配到一个无效的伪元素时要丢弃整个规则，两个分开的规则必须写成 ::-moz-selection, ::selection {...}。这个规则在非Gecko浏览器中会因为无效而被丢弃。

<div>提供::selection 伪元素选择器测试的文本</div>
<p>也尝试选中在这个p标签中的文本</p>

/* 将被选中的任何文本渲染为金黄色和红色背景 */
::-moz-selection {
  color: gold;
  background: red;
}
::selection {
  color: gold;
  background: red;
}
/* 将选中文本渲染成黑色背景白色前景 */
p::-moz-selection {
  color: white;
  background: black;
}
p::selection {
  color: white;
  background: black;
}

输出

规范

::selection CSS伪元素选择器是CSS第3级选择器的草案，但是在被推荐使用前就被废弃。它现在在第4级伪元素选择器草案中。

浏览器兼容性

[1] Gecko 目前仅支持带有前缀的 ::moz-selection选择器，在 bug 509958 中将不再需要添加前缀。