默認情況下,浏覽器中用鼠標選擇的網頁文本都是“深藍的背景,白色的字體”顯示的。但是有些時候我們並不想要“深藍的背景,白色的字體”這種顯示效果。
在CSS3中,我們可以使用“::selection選擇器”來改變被選擇的網頁文本的顯示效果。
注意,“::selection選擇器”是雙冒號。其實雙冒號往往都是“偽元素”,而單冒號往往都是“偽類”。關於偽元素和偽類這兩者的區別,我們在CSS3進階再詳細給大家講解。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 ::selection選擇器</title> <style type="text/css"> div::selection { background-color:red; color:white; } p::selection { background-color:orange; color:white; } </style> </head> <body> <div> 學習網,讓這裡的一切成為襯托你成功的 。</div> <p> 學習網,讓這裡的一切成為襯托你成功的 。</p> </body> </html>
在浏覽器預覽效果如下:
分析:
用鼠標選擇div標簽中“ 學習網”時,會發現背景顏色變為紅色,字體顏色為白色,效果如下:
用鼠標選擇p標簽中“ 學習網”時,會發現背景顏色變為橘黃色,字體顏色為白色,效果如下: