CSS3選取器 ::selection選取器

標籤：cti   滑鼠   選擇   web   jpg   ack   ref   .com   情況   

“::selection”虛擬元素是用來匹配反白的文本(用滑鼠選擇文本時的文本)。瀏覽器預設情況下，用滑鼠選擇網頁文本是以“深藍的背景，白色的字型”顯示的，效果如所示：

從中可以看出，用滑鼠選中“專註IT、互連網技術”、“純乾貨、學以致用”、“沒錯、這是免費的”這三行文本中，預設顯示樣式為：藍色背景、白色文本。

有的時候設計要求,不使用那種瀏覽器預設的突出文字效果，需要一個與眾不同的效果，此時“::selection”虛擬元素就非常的實用。不過在Firefox瀏覽器還需要添加首碼。

樣本示範:

通過“::selection”選取器，將Web中選中的文本背景變成紅色，文本變成綠色。

HTML代碼：

<p>“::selection”虛擬元素是用來匹配反白的文本。瀏覽器預設情況下，選擇網站文本是深藍的背景，白色的字型，</p>

CSS代碼：

::-moz-selection {  background: red;  color: green;}::selection {  background: red;  color: green;}

結果示範：

CSS3選取器 ::selection選取器