網站最後更新日期:2016年12月3日
歡迎大家來到暢想資源 AREFLY.COM!
讚好Facebook
追隨Twitter
加入QQ群
關注微博
關注微信公眾號
捐款
更多聯絡方式
X

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 條留言

訪客以 6:5 暫時領先博主

迴響載入中,請稍等...
  1. 6樓
    sajiazheng China Google Chrome Windows

    评论被吞了

    [回覆]
  2. 5樓
    快乐家园 China Safari iPad

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

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

      [回覆]
  3. 4樓
    JV China Mozilla Firefox Windows

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

    [回覆]
  4. 3樓
    悦听有声 China Google Chrome Windows

    支持一下。

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

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

    [回覆]
  6. 沙發
    每日秀 China Google Chrome Windows

    这个有点意思哟

    [回覆]
廣告載入中...

發表迴響



微笑 調皮 偷笑 可愛 大笑 壞笑 詭計 贊 疑問 HI~ 愛 抱歉 對不起 頭暈 驚訝 帥 努力 勞累 瘋狂 難過 大哭 差 豬 邪惡 無言 憤怒 流汗 擦汗


快捷鍵:Ctrl+Enter