::selection 伪类选择器用于突出显示的页面用户选择的任何部分，包括可编辑文本字段中的文本。
此伪元素可应用于 color ， background-color ，background（background-color 部分） 和text-shadow（注：到目前位置IE下该属性无效）属性。设置其他属性是没有任何效果的。
火狐下需要加-moz-属性前缀；
支持浏览器：Chrome，Firefox (Gecko)，Internet Explorer 9+，Opera，Safari
例如：
| 代码如下 | 复制代码 |
|
/* draw any selected text yellow on red background */ ::-moz-selection { color: gold; background: red; } ::selection { color: gold; background: red; } /* draw selected text in a paragraph white on black */ p::-moz-selection { color: white; background: black; } p::selection { color: white; background: black; } |
|
一个完整的例子：
| 代码如下 | 复制代码 |
|
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>CSS ::Selection 伪类选择器-WEB前端开发</title> <meta name="author" content="愚人码头,www.css88.com" /> <style> p{text-shadow:2px 2px 5px #333333;} p::-moz-selection{background:#000;color:#f00;text-shadow:2px 2px 5px #FFFF2E;} p::selection{background:#000;color:#f00;text-shadow:2px 2px 5px #FFFF2E;} </style> </head> <body> <h1>选中下面的文字，看看它的颜色</h1> <p>你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。</p> </body> </html> |
|
效果如下
时间： 2024-09-29 07:53:33