教程集 www.jiaochengji.com
教程集 >  CSS教程  >  正文 CSS中Selection 伪类选择器示例

CSS中Selection 伪类选择器示例

发布时间:2019-10-31   编辑:jiaochengji.com
教程集为您提供CSS中Selection 伪类选择器示例等资源,欢迎您收藏本站,我们将为您提供最新的CSS中Selection 伪类选择器示例资源
css中::selection可以重点显示页面中要显示的内容了,如可以通过color , background-color ,background来进行设置下文来给各位介绍一个例子。

::selection 伪类选择器用于突出显示的页面用户选择的任何部分,包括可编辑文本字段中的文本。

此伪元素可应用于 color , background-color ,background(background-color 部分) 和text-shadow(注:到目前位置IE下该属性无效)属性。设置其他属性是没有任何效果的。


火狐下需要加-moz-属性前缀;

支持浏览器:Chrome,Firefox (Gecko),Internet Explorer 9 ,Opera,Safari

例如:

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy3217')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy3217>

/* 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; }

一个完整的例子:

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy8856')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy8856>

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

效果如下

 

<center>\'CSS中Selection</center>

您可能感兴趣的文章:
CSS中Selection 伪类选择器示例
css的伪类和伪元素理解
CSS3中的属性选择符
css的选择器的详细介绍
css 伪类的使用方法详解
CSS3改变文本选中的默认颜色代码
IE中伪类:hover的使用及BUG
CSS3的default伪类选择器使用详解
css 伪类——动态链接
通过实例讲解网页技术CSS中类的应用

[关闭]
~ ~