CSS3 ::selection選擇器


一、介紹

之前看到有些網站選中內容的顏色和背景色都不是平時看到的藍色和白色。今天有興趣查看了一下,原來是一個很簡單的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有問題歡迎與我討論,共同進步。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM