一、介绍

之前看到有些网站选中内容的颜色和背景色都不是平时看到的蓝色和白色。今天有兴趣查看了一下，原来是一个很简单的CSS3的选择器::selection的用法。

上例子：

<style>.selectColor::selection{color:#fff;background:pink;}.selectColor::-moz-selection{color:#fff;background:pink;}.selectColor::-webkit-selection{color:#fff;background:pink;}
</style>
<body><p>普通文本，不设置::section,选中时文本的颜色为白色，背景色为蓝色</p><p class="selectColor">选择文本的颜色为白色，背景色为粉色</p>
</body>

Note:

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

浏览器支持：

IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。

Firefox 支持替代的 ::-moz-selection。

二、应用举例

看过djagno文档的都知道，它的页面风格是这样的

我选中一部分文字，效果是这样的

可以看出，整体风格很统一，选中文字背景的浅绿色也让人感觉很舒服，这种细节的考虑无疑会提升用户体验。

它的样式也很简单，就一行

我的博客现在也应用了这个样式，哈哈^_^

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/4533647.html有问题欢迎与我讨论，共同进步。

转载于:https://www.cnblogs.com/starof/p/4533647.html

CSS3 ::selection选择器相关推荐

jQuery与CSS3的选择器
2019独角兽企业重金招聘Python工程师标准>>> jQuery与CSS在选择器方面,有很多的相似之处,本文稍加总结,方便对比使用. 注:本文以jQuery1.9.1版本和CSS ...
【前端】【html5/css3】前端学习之路（二）（CSS3新选择器/CSS3盒模型/CSS3过渡效果）
一.CSS3新增选择器 1.结构(位置)伪类选择器 :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nt ...
CSS3（选择器、过渡、变形、动画）
目录一.渐进增强和优雅降级二.CSS3新增选择器 1.属性选择器 2.结构伪类选择器 3.目标伪类选择器 4.否定伪类选择器 5.动态伪类选择器 6.UI状态伪类 7.层级选择器三.阴影 1.盒 ...
css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别、遮罩层效果、三级菜单制作、选项卡制作——css3知识点总结
目录 css3新增选择器兄弟选择器属性选择器伪类选择器其他伪类选择器类元素选择器直接选择器否定选择器伪元素 :after清除浮动 :before和:after 用来写小三角形首字母 ...
html5类选择器选择权重,Python Html5和CSS3的新增功能：CSS权重与CSS3新增选择器
一.CSS权重概念 CSS权重概念:指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式. 二.权重的等级 2.1.权重的等级划分 ...
php表单偶数变颜色,利用CSS3 nth-child()选择器实现表格奇偶行变色
nth-child()简介 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个js判断,来加一个css,从而使表格偶数行和奇数行颜色不一样.这 ...
css3学习之 css选择器(css3 属性选择器)
这是上一篇css选择器介绍里面内容比较详细..大家可以看看下面我将结合<HTML 5与css 3权威指南>这本书对css选择器再进行记录下里面有些个人见解如果看客觉得有问题.可以提出 ...
html+not选择器,CSS3属性选择器与(:not)选择器_html/css_WEB-ITnose
一:css3属性选择器: img[alt]{ border:2px dashed #000;} 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签. 还可以通过设定属性值来缩小匹配范围:如下代 ...
CSS基础(part19)--CSS3属性选择器
学习笔记,仅供参考,有错必究参考自:pink老师教案 CSS3属性选择器属性选择器列表: 选择符简介 E[att] 选择具有att属性的E元素 E[att="val"] 选择 ...

CSS3 ::selection选择器

一、介绍

二、应用举例

CSS3 ::selection选择器相关推荐

最新文章

热门文章