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

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

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

示例演示:

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

HTML代碼：

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

CSS代碼：

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

結(jié)果演示：

注意：

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

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