CSS3 ::selection选择器
生活随笔
收集整理的這篇文章主要介紹了
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有問題歡迎與我討論,共同進步。
轉載于:https://www.cnblogs.com/starof/p/4533647.html
總結
以上是生活随笔為你收集整理的CSS3 ::selection选择器的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: hiho #1044 : 状态压缩·一
- 下一篇: PowerDesigner与SQL Se