共计 704 个字符,预计需要花费 2 分钟才能阅读完成。
CSS ::selection
伪元素代表文档中被用户选择并处于高亮状态的一段内容。
例如用户使用鼠标或其它方式选择了一段文本,单文本被选择时,它处于高亮状态,默认背景为蓝色,前景字体颜色为白色:
只有一部分 CSS 属性可以用于为 ::selection
伪元素代表的元素指定样式,它们是:color、background-color和text-shadow 。
你也可以使用 background 属性来为选中的片段设置样式,但是不支持背景图片。因此,background属性也只能用于设置背景颜色。
::selection
是 CSS3 草案中引入的一个属性,但是目前这个属性已经被移除,不是标准的 CSS 属性。但是,大多数的现代浏览器仍然支持这个属性。
示例代码
下面的示例代码为页面中被选中的内容设置前景色和背景色。
::selection {
background-color: #222;
color: white;
}
在线演示
这段文字被选中时,背景色为绿色,文字为白色。
这段文字被选中时,背景色为金色,文字为白色。
这段文字被选中时,背景色为粉红色,文字为白色。
这段文字被选中时文字将带有阴影效果。
浏览器支持
支持 ::selection
伪元素的浏览器有:Chrome, Safari, Opera, Internet Explorer 9+。
Firefox 浏览器需要添加 -moz-
前缀:::-moz-selection
。
支持 ::selection
伪元素选中的片段使用 text-shadow 属性的浏览器有:Chrome, Safari, Opera, Firefox。