CSS ::Selection

编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。 点击链接查看最新前端内容,或到各大应用市场搜索「 掘金」下载APP,技术干货尽在掌握中。

前天在一个前端群中碰到一个网友问了一个有关于唐人CSS帝国中关于选择文本,背景是红色,而文本是白色的问题,如下图所示:

或许大家对这样的实现并不陌生,可是有很多童鞋可能跟我一样,并不知道是如何实现,因为在默认情况下,选择网站文本都是深蓝的背景,白色的字体,就如下本站的而言,选择文本后,背景是深蓝色,而选中的文本就是白色,如下图所示:

后来带着这样的问题,我也是到处寻找解决的方法,几经高人指点,说是CSS的“::selection”实现的,这样一来在google中大量搜索有关于“::selection”的使用方法,功夫不负有心人,总算是搞清楚了。后来觉得这个蛮有意思的,特意整理出来与大家一起分享。

就如前面所言,大家都知道浏览器对选中的文本默认样式都是统一的,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属性,设置其他属性是没有任何效果的。

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

如需转载烦请注明出处:W3CPLUS

返回顶部