CSS3 ::selection 选择器

最新推荐文章于 2020-12-02 18:42:33 发布

man_tutu

最新推荐文章于 2020-12-02 18:42:33 发布

阅读量2.9k

点赞数 2

分类专栏： CSS 文章标签： css3 前端

本文链接：https://blog.csdn.net/man_tutu/article/details/54965087

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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这三个属性，对其他属性无效。

man_tutu

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS3 ::selection 选择器

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

扫一扫