CSS ::Selection

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

前天在一个前端群中碰到一个网友问了一个有关于唐人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

如需转载,烦请注明出处:https://www.w3cplus.com/content/css-selection

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部