大家都知道浏览器对选中的文本默认样式都是统一的,Windows下是一个深蓝色的背景,白字的前景,而在Mac下是一个淡蓝色背景,白色字体,就如上图所展示的一样,自从有了这个“::selection”选择器后,我们在部分浏览器中可以设置你所需要的样式,下面就让我来告诉大家如何使用这个“::selection”来改变在浏览器中选中文本后的背景色与前景色。

::selection使用语法:

   /*Webkit,Opera9.5+,Ie9+*/    ::selection {  background: 颜色值;  color:颜色值;    }    /*Mozilla Firefox*/    ::-moz-selection {  background: 颜色值;  color:颜色值;     }  

兼容的浏览器:

::selection在IE家族中,只有IE9+版本支持,在Firefox中需要加上其前缀“-moz”,查阅相关w3c官方资料,并没有对这个属性的解说资料,只知道这个属性被规纳在CSS的伪类选择器中。

下面我们一起来看看其具体使用,例如如我们在Web页面中有这么一段话:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ornare vulputate mi. Nullam auctor pede sit amet odio varius consectetuer. Fusce bibendum neque eu purus. Donec et nulla at odio volutpat luctus. Cras facilisis consequat nisi. Aliquam erat volutpat. Etiam tellus magna, ultrices quis, porttitor non, bibendum quis, lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed felis. Phasellus enim. Aliquam malesuada mi eu erat. Suspendisse potenti. In diam ante, sagittis vel, rutrum at, fringilla pulvinar, nunc.

在默认情况下,在上面段落中选中任意文本,其背景都是深蓝,前景是白色,下面我们给他加上一个“::selection”运用,把背景改成红色,前景依旧是白色:

  p::selection {     background: red;     color: #fff;   }   p::-moz-selection {     background: red;     color: #fff;   }  

加上上面属性后,你会后到,选中的文本其背景是红色,而前景是白色,跟唐人CSS帝国的效果是一模一样的了,如下图所示:

不知道你有没有这样的想法,我一开始冒出这样的一个想法,就是我能不能通过“::selection”来改变选中的文本其他样式呢?比如说,改变选中的字体,字号等等;于是我在上面的代码基础上加了一个15px的字号:

   p::selection {      background: red;      color: #fff;      font-size: 15px;    }       p::-moz-selection {      background: red;      color: #fff;      font-size: 15px;    }  

大家猜结果如何?告诉大家吧,有点失望,结果是没有任何效果,如下所示:

这样一来也验证了:“::selection”只能设置两个属性,一个就是background,另一个就是color属性,设置其他属性是没有任何效果的。

一个小小的技巧分享,希望能对有需要的朋友有所帮助。

转自:http://blog.163.com/zx_1258/blog/static/1332337992012112893544231/

CSS ::Selection的使用方法的更多相关文章

  1. 为IE单独写CSS的三种方法

    本文由 Kayo Lee 发表,本文链接:http://kayosite.com/the-methods-make-css-only-for-ie.html 因为万恶的 IE 存在各种的不标准,因此, ...

  2. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

  3. CSS清除浮动的方法

    CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...

  4. CSS中垂直居中的方法

    昨天总结了css中水平居中的方法,今天来总结一下css中实现垂直居中的方法. line-height line-height用于实现单行文本的垂直居中,如下图中,我们要求单行文本垂直居中,只需要将di ...

  5. HTML5结合CSS的三种方法+结合JS的三种方法

    HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...

  6. CSS模糊效果及其兼容方法

    今天在整理IE滤镜时网站访问这里,居然找到模糊滤镜blur(),感觉太不可思议了,想不到IE居然会有这么多种滤镜效果,这基本上是模仿PS的.今天的重点是模糊滤镜 CSS模糊效果及其兼容方法 实例 兼容 ...

  7. div+css隐藏内容样式方法

    div css隐藏内容样式方法     div+css隐藏内容方法 一般情况下,css隐藏的用途,如下: 1.对文本的隐藏 2.隐藏超链接(另类黑链) 3.对统计代码隐藏 4.隐藏超出图片 5.css ...

  8. CSS技巧: CSS隐藏文字的方法(CSS text-indent: -9999px;)

    建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义. 在CSS中如何以图代字,找 ...

  9. 奥森图标和CSS特殊字体使用方法

    作为第一篇博文,写这个 我快要被气炸,好吧,废话不说了 昨天在项目中发现有很多这些Awesome图标 也在网上找了下Font Awesome下载后这些文件,现在的版本是4.2,Font Awesome ...

随机推荐

  1. win10登录不上sql2005

    因需求安装了一个SQL Server 2005. 登录的时候,用户Sa模式可以登录,Windows身份验证方式却无法登录. 经测试.解决方法如下: SQL Server Management Stud ...

  2. Delphi xe5 控件TIdhttp的用法post,get解决中文乱码问题

    网络接口如下图: 浏览器演示如下:http://xxx.xxx.xxx.xxx/web/login!doLogin?data={"password":"yy123&quo ...

  3. Android-广播概念

    Android中的消息机制 1.Handler+Message消息机制,是用于子线程与主线程的通讯: 2.广播+广播接收者也是消息机制,是重量级别的,四大组件之一,需要激活组件,是用于组件和组件之间通 ...

  4. pipeline+sonar

    前提需要在项目根目录下新建sonar-project.properties文件,内容如下: # must be unique in a given SonarQube instance sonar.p ...

  5. 为web文件夹添加IIS应用程序池用户权限

    在文件夹或文件右键属性—>安全——>编辑——>添加——>输入IIS APPPOOL\应用程序池名,确定即可将IIS 7或7.5.8的应用程序池虚拟用户添加到权限控制里面,然后再 ...

  6. windows Win7如何设置多用户同时远程登录

    windows  Win7如何设置多用户同时远程登录 1.创建一个用户 密码永不过期 2.在本地组策略编辑器里面,依次展开计算机配置--->管理模板--->Windows组件---> ...

  7. 1002. 查找常用字符 leecode

    题目: 给定仅有小写字母组成的字符串数组 A,返回列表中的每个字符串中都显示的全部字符(包括重复字符)组成的列表.例如,如果一个字符在每个字符串中出现 3 次,但不是 4 次,则需要在最终答案中包含该 ...

  8. Spring整合JPA时,为实体类添加@Entity注解时提示The type MultipartEntity is deprecated

    这个情况是由于导入错了Entity包所导致的. 按住Alt+T时,会有两个关于@Entity的提示 org.hibernate.annotations.Entity 和 javax.persisten ...

  9. css3滚动条

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. kali linux之msf客户端渗透

    在无法通过网络边界的情况下转而攻击客户端----进行社会工程学攻击,进而渗透线上业务网络 含有漏洞利用代码的web站点--利用客户端漏洞 含有漏洞利用代码的doc,pdf等文档----诱使被害者执行p ...