1. 程式人生 > >用CSS美化被滑鼠選中的文字的樣式

用CSS美化被滑鼠選中的文字的樣式

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

觀看演示

CSS程式碼

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

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

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

/* webkit, opera, IE9 */
div.highlightPink::selection 
{ background:pink; } /* mozilla firefox */ div.highlightPink::-moz-selection { background:pink; }
觀看演示

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