::selection
版本: CSS3
CSS伪类
::selection
元素应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)。
语法:
E :: selection { sRules }
设置对象被选择时的CSS样式。
::selection
能定义被选择时的
background-color
,
color
及
text-shadow
(IE11尚不支持定义该属性)。
::selection { background-color: cyan; }
允许属性
只有一小部分CSS属性可以用于
::selection
选择器:
-
color
-
background-color
-
cursor
-
caret-color
-
outline
-
text-decoration
-
text-emphasis-color
-
text-shadow
要特别注意的是,
background-image
会如同其他属性一样被忽略。
浏览器支持
![]() |
![]() |
![]() |
![]() |
![]() |
IE9+以及新版浏览器都支持
::selection
|
||||
IE8以及早期IE版本不支持
::selection
|
例子
//HTML this text has special styles when you highlight it. <p>also try selecting text in this paragraph.</p> //CSS ::-moz-selection { color: gold; background-color: red; } p::-moz-selection { color: white; background-color: blue; } /* 选中的文本是红色背景,金黄色的字体 */ ::selection { color: gold; background-color: red; } /*选中的是蓝色背景,白色的字体的段落*/ p::selection { color: white; background-color: blue; }
also try selecting text in this paragraph.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> ::selection { color:pink; } ::-moz-selection { color:pink; } </style> </head> <body> <p>用鼠标选中此文字看效果</p> </body> </html>
用鼠标选中此文字看效果