CSS ::Selection 伪类选择器 – WEB前端开发

Web前端开发 • 10年前扫码分享

我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。

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