MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

概述

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

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

::selection中的text-shadow属性仅有Chrome, Safari 和 Firefox 17+支持。

尽管这个伪元素选择器是CSS第3级选择器的草案,它仍然已经在候选阶段被移除了,因为它的行为是不确定的,尤其是嵌套元素,并且不可操作(基于W3C样式邮件列表讨论)。

::selection 已经被加入第4级伪元素。

示例

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

输出

规范

Specification Status Comment
CSS Pseudo-Elements Level 4
::selection
Working Draft Initial specification

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

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1 1.0 -moz[1] 9 9.5 1.1
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ? ?

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

文档标签和贡献者

 此页面的贡献者: ziyunfei, Serifx, ranwu, JohnCido, vagusX, monjer, hikarievo
 最后编辑者: ziyunfei,