“::selection”偽元素是用來匹配突出顯示的文本(用鼠標選擇文本時的文本)。瀏覽器默認情況下，用鼠標選擇網(wǎng)頁文本是以“深藍的背景，白色的字體”顯示的，效果如下圖所示：

從上圖中可以看出，用鼠標選中“專注IT、互聯(lián)網(wǎng)技術”、“純干貨、學以致用”、“沒錯、這是免費的”這三行文本中，默認顯示樣式為：藍色背景、白色文本。

有的時候設計要求,不使用上圖那種瀏覽器默認的突出文本效果，需要一個與眾不同的效果，此時“::selection”偽元素就非常的實用。不過在Firefox瀏覽器還需要添加前綴。

示例演示:

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

HTML代碼：

<p>“::selection”偽元素是用來匹配突出顯示的文本。瀏覽器默認情況下，選擇網(wǎng)站文本是深藍的背景，白色的字體，</p>

CSS代碼：

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

結果演示：

注意：

1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 選擇器。

2、Firefox 支持替代的 ::-moz-selection。