CSS3 ::selection 选择器

来源：互联网发布：软件著作权范文编辑：程序博客网时间：2024/06/01 20:49

CSS3 ::selection 选择器

在不同的系统下的所有浏览器选中内容的背景色都是统一的，比如说windows系统下，所有的浏览器中显示的背景色是蓝色的。而使用::selection 选择器则可以在部分支持的浏览器中改变选中的样式。

我在看网上的前端博文的时候，发现有一个前端博客里选择文本是粉红色的背景色，白色的字体颜色，如下图：
这里写图片描述

我觉得这个显示非常的新奇，默默地就少女心爆棚了，因为一般我们在浏览网页的时候，选中文本时显示的样式都是蓝色的背景，白色的字体，如下图所示：
这里写图片描述

在google中搜索了很多相关的词条，然后就发现了::selection这个神奇的伪类，该伪类元素可以应用于少量 CSS 属性：color、background、text-shadow(IE11尚不支持定义该属性)。

下面就让我们来尝试一下吧！

CSS代码

/*Webkit, Opera9.5+, IE9+*/::selection {    background: #FF69B4; /*颜色值*/    color: #fff; /*颜色值*/}/*Firefox*/::-moz-selection {    background: #FF69B4; /*颜色值*/    color: #fff; /*颜色值*/}

完整HTML代码

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>::selection</title>    <style media="screen">      p::selection {        color: #fff;        background: red;        text-shadow: 1px 1px 1px #000;      }    </style>  </head>  <body>    <p>程序员的一生时间90%是用在编程上，而剩余的10%是活在世界上。</p>  </body></html>

实现效果如下：
这里写图片描述

随后我又尝试了一些被提及可以在::selection中改变的属性，例如cursor、outline、text-decoration等，最后失望的发现，并不能改变这些样式。

看来::selection中的确只能设置color、background-color、text-shadow这三个属性，对其他属性无效。

0 0