CSS ::Selection 伪类选择器

::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>

赞(0) 打赏
未经允许不得转载:WEB前端开发 » CSS ::Selection 伪类选择器

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏