CSS元素中::selection伪元素的作用详解

题记:很多人想学习DIV+CSS,于是在网上不断的找关于DIV+CSS教程,找了N多结果,翻来覆去的看才知道大都是重复的。其实,想学好DIV+CSS,最好的方法是去w3school把最基础的只是学扎实了。然后,去找几个比较成熟、稳定、扎实的网站,下载下来他们的CSS,从头到尾的看一遍,看看自己能看懂多少。

闲话不多车了,在观察主题CSS时,发现开头时常会有::selection的定义,去w3c官网看了下,详细说明了这是一种伪元素选择器:

定义和用法

::selection 选择器匹配被用户选取的选取是部分。

只能向 ::selection 选择器应用少量 CSS 属性:color、background、cursor 以及 outline。

其中,::selection选择器对于浏览器的支持如下:

浏览器支持
IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。
Firefox 支持替代的 ::-moz-selection。

也就是说,此选择器的效果在IE9以上才会显示。下面暗淡的黑根据实际效果来演示。

在使用::selection选择器之后,可实现自定义效果,比如暗淡的黑个人网站现在的效果,背景为红色,字体,效果如下:

百度云盘免费获取1T空间

在windows系统下,在浏览器上选中字体时,默认的效果是蓝色背景,白色字体,如图:

迪迪熊生日快乐
具体代码如下:

1
2
3
4
5
6
7
::selection

{color:字体颜色

background:背景颜色

}

在FireFox下实现效果,代码如下:

1
2
3
4
5
6
7
[css]::-moz-selection

{color:字体颜色

background:背景颜色

}

注意:::selection伪元素只能定义字体颜色和背景颜色,不能定义其他元素!

声明:本站除特别声明外,均为本站原创,转载请注明出处:暗淡的黑IT网络,谢谢!