章节
问答
课签
笔记
评论
占位
占位

CSS3选择器 ::selection选择器

::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下,用鼠标选择网页文本是以“深蓝的背景,白色的字体”显示的,效果如下图所示:

从上图中可以看出,用鼠标选中“专注IT、互联网技术”、“纯干货、学以致用”、“没错、这是免费的”这三行文本中,默认显示样式为:蓝色背景、白色文本。

有的时候设计要求,不使用上图那种浏览器默认的突出文本效果,需要一个与众不同的效果,此时::selection伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。

示例演示:

通过“::selection”选择器,将Web中选中的文本背景变成红色,文本变成绿色。

HTML代码:

<p>“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下,选择网站文本是深蓝的背景,白色的字体,</p>

CSS代码:

::-moz-selection {
  background: red;
  color: green;
}
::selection {
  background: red;
  color: green;
}

结果演示:

注意:

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

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

 

任务

在右边 CSS 编辑器的第1行输入正确代码,将鼠标选中的文本时的背景变成 orange,文本变成 white。

?不会了怎么办

要掌握 selection 选择器哈!

||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
?{
background:
      orange;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

已采纳回答 / 慕运维7130634
这是给火狐加的适配,如果你把这一段删了用火狐打开就不会显示效果了

最赞回答 / 左左右右走走停停
用鼠标选中文字,才会有效果

最新回答 / cRpeDiem
不添加  去除其选择器即可

最赞回答 / qq_陌丶难忘_0
..    GOOD    半天没看懂您说的什么

最新回答 / 慕斯3035540
http://www.cr173.com/soft/72633.html   Dreamweaver地址

最赞回答 / vay
俩冒号是伪元素(CSS3),一冒号是伪类。

最新回答 / 独自精彩
以前还纳闷呢 为什么有的网站复制文字的时候 背景色是绿色 文字是白色  (默认都是背景色蓝色 文字白色) 原来是这样做的  

最新回答 / 3qfang
360浏览器都可以~~~~

已采纳回答 / 西地锦
::selection{}这样写是针对全文有效的。如果你要针对某段文字的话,你可以针对特定的文字段落设定::selection<...code...><...code...>这样第一个P标签就是自己定义的效果,第二个p标签就是浏览器默认的了~~

最新回答 / Rhinel
大哥,那是P标签里面的内容
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言