首頁  >  文章  >  web前端  >  CSS如何美化被選中的文字方法介紹

CSS如何美化被選中的文字方法介紹

高洛峰
高洛峰原創
2017-03-08 15:20:191479瀏覽

CSS的作用就是用來美化網頁的內容或結構層次。這我們都知道,不是嗎?隨著CSS技術的不斷革新升級,我們獲得了更多的控制樣式的能力。一個不是那麼眾所周知的技術就是我們可以在瀏覽器中美化被選擇的文字的樣式。 Windows本身提供的是一種很難看的墨綠色的顏色,而蘋果電腦上提供的是淺綠色。火狐瀏覽器,IE9,Opera和Google瀏覽器允許我們自訂被選擇文字的顏色。讓我來展示給你看:

CSS代碼

/* webkit, opera, IE9 */
::selection { background:lightblue; }   
/* mozilla firefox */
::-moz-selection { background:lightblue; }

-moz-屬性前綴是個火狐瀏覽器用的,而基本的::selection選擇器是給谷歌瀏覽器用的。跟其它CSS選擇器的用法一樣,你可以嵌套使用,在不同的地方顯示不同的顏色:

/* webkit, opera, IE9 */
p.highlightBlue::selection { background:lightblue; }   
/* mozilla firefox */
p.highlightBlue::-moz-selection { background:lightblue; }   

/* webkit, opera, IE9 */
p.highlightPink::selection { background:pink; }   
/* mozilla firefox */
p.highlightPink::-moz-selection { background:pink; }

用CSS美化被選擇的文字只是一種很簡單的技巧,但這些都能讓你的網站頁面更絢麗、更有色彩!

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持PHP中文網。



以上是CSS如何美化被選中的文字方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn