We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概述

::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级伪元素选择器草案中。

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,