首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

::selection

::selectionCSS伪元件适用样式已被突出显示由用户(例如,用鼠标)一个文档的所述部分。

代码语言:javascript
复制
::selection {
  color: gold;
  background: red;
}

只有一小部分css属性可以与::selection伪元素:

  • color
  • background-color
  • cursor
  • outline
  • text-decoration
  • text-emphasis-color
  • text-shadow

特别要注意的是,background-image被忽视了。

语法

代码语言:javascript
复制
/* Firefox syntax */
::-moz-selection

::selection

HTML

代码语言:javascript
复制
<div>This text has special styles when you highlight it.</div>
<p>Also try selecting text in this paragraph.</p>

CSS

代码语言:javascript
复制
/* Make selected text gold on a red background */
::-moz-selection {
  color: gold;
  background: red;
}

::selection {
  color: gold;
  background: red;
} 

/* Make selected text in a paragraph white on a blue background */
p::-moz-selection {
  color: white;
  background: blue;
}

p::selection {
  color: white;
  background: blue;
}

结果

规范

Specification

Status

Comment

CSS Pseudo-Elements Level 4The definition of '::selection' in that specification.

Working Draft

Initial definition

注意:尽管::selection存在于CSS选择器级别3的草案中,但是在候选推荐阶段被删除,因为它的行为没有被规定(特别是嵌套元素)并且没有实现互操作性(基于W3C Style邮件列表中的讨论)。该::selection伪元素被带回在伪元素4级

浏览器兼容性

注:text-shadow::selection由Chrome、Safari和Firefox 17+支持。

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

1

(Yes)

1.0 -moz1

9

9.5

1.1

Feature

Android

Chrome for Android

Edge

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

?

?

(Yes)

?

?

?

?

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com