×
本站为切合内地访客的需要、已将全站改为简体中文,但侧边栏顶部的简繁转换功能将仍然保留供大家使用!
加入本站QQ群
关注本站微博
更多联络方式

CSS使用::selection客制化网页反白顔色

反白顔色,即是你选取一段文字时,所显示的文字顔色及背景顔色,一般浏览器都回采用蓝底黑字。现在我们也可以直接在CSS中使用 ::selection 参数来客制化我们网页反白的顔色,让我们的网页反白时更加活泼并清晰易懂!

效果预览(反白这段文字看看!)

注意:该效果不支持Internet Explore 8以下的版本!

【本段未被任何标签包围】 ::selection 可以让你的网页反白顔色与浏览器自带的有很大的区别,不过IE8以下的版本均不支持

【本段被 <p> 标签包围】我们可以使用 标签/容器名称::selection 来客制化不同标签下的 ::selection 效果

【本段被 <i> 标签包围】例如我们可以使用 i::selection 来修改在 <i> 标签下,反白的效果

【本段被 <div class="hello"> 标签包围】当然,我们也可以使用 .hello::selection 来修改在 class="hello" 容器下,反白的效果

不过要注意的是, ::selection 标签只能设置 colorbackground ,而不能设置任何其他参数,例如 font-size 等等

教程

1丶想要达成上述的效果其实很简单,首先我们当然还是随便写好一个HTML网页,然后反白(选取)一下任意内容来看看浏览器自带的效果:

css-selection-1

2丶现在我们就可以加入 ::selection 到CSS中,客制化我们网页的反白顔色:

上述代码详解:从上述CSS我们可以看到, ::selection 即代表全网页所使用的效果,而 i::selectionp::selection 即是在 <i><p> 标签内的反白效果,当然, .hello::selection 就是 class="hello" 的容器内的反白效果

注释:由於Firefox(一意孤行 :grin: )不支持该函数,我们还需要再多加一个Firefox自己的专属语法 ::-moz-selection 才行

5丶现在我们客制化网页的反白顔色就完成啦! :razz:

css-selection-2

提示:不过假设我们加入 font-size: 50px;::selection 中,就会发现此参数完全无效,因为 ::selection 内只有 colorbackground 这两个参数是可用的

历史上的今天

2013年:Mac使用Boot Camp安装Windows(20条评论)

注:本站同时长期承接WordPress插件及主题制作丶服务器环境配置等,如需详情,请“联系我们”!

© 版权声明:“畅想资源”之所有文章及资源系采用“创用 CC 姓名标示-非商业性-相同方式分享 3.0 香港 授权条款”发布及共享,转载时须以相同方式发布并注明“原文链接”!

本文固定链接:http://www.arefly.com/css-selection/

本文章由“”於2014年07月19日发表於“网络”分类

你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站

转载请注明:CSS使用::selection客制化网页反白顔色 | 畅想资源

关键字:, ,

以下是广告时间,广告内容仅供参考!

广告载入中...

CSS使用::selection客制化网页反白顔色:目前有 10 条留言

双方以 5:5 暂时持平

评论载入中,请稍等...
  1. 5楼
    快乐家园 China Safari iPad

    我试了下发现对textarea无效??? :)

    [回复]
    • 沒有啊~我這裏測試是正常的~ :razz:

      [回复]
  2. 4楼
    JV China Mozilla Firefox Windows

    这效果几乎所有主题都会用到。

    [回复]
  3. 3楼
    悦听有声 China Google Chrome Windows

    支持一下。

    [回复]
  4. 2楼
    Less China Google Chrome  HM 1S Build/JLS36C) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.141 Mobile Safari/537.36

    拿来当论坛签名用法还是不错的。

    [回复]
  5. 沙发
    每日秀 China Google Chrome Windows

    这个有点意思哟

    [回复]
广告载入中...

发表评论



微笑 调皮 偷笑 可爱 大笑 坏笑 诡计 赞 疑问 HI~ 爱 抱歉 对不起 头晕 惊讶 帅 努力 劳累 疯狂 难过 大哭 差 猪 邪恶 无言 愤怒 流汗 擦汗


快捷键:Ctrl+Enter