使用::selection自定義選中文本的顏色

::selection

有的人在瀏覽網(wǎng)頁(yè)時(shí)，喜歡一邊選中文本一邊閱讀（博主就是這類強(qiáng)迫癥患者）。在瀏覽某些個(gè)性鮮明的網(wǎng)站時(shí)，當(dāng)我們劃選文本時(shí)突然發(fā)現(xiàn)跟平時(shí)不太一樣，比如下圖，

在windows環(huán)境下，正常的文本選中應(yīng)該是深藍(lán)色背景白色文本的樣式。那么這個(gè)特殊的文本選中樣式是如何做到的呢？

原來(lái)css中有這樣的一個(gè)偽類::selection用于自定義文本選中時(shí)的樣式設(shè)置。

::selection的語(yǔ)法如下，

E::selection {
    background-color: xxx;
    color: xxx
}

讓我們來(lái)看個(gè)例子，

<style>
div::selection {
    background-color: red;
    color: #fff;
}
</style>
<div>
    blablabla......
</div>

其效果如下，

這里有個(gè)demo，感興趣的看官可以點(diǎn)開(kāi)看看。

關(guān)于這個(gè)偽類的文檔貌似在W3C的官方文檔中并沒(méi)有明確的說(shuō)明，不過(guò)在w3school中有相關(guān)的說(shuō)明，如下

經(jīng)過(guò)實(shí)驗(yàn)，我們知道::selection偽類只能設(shè)置color、background、cursor、outline這幾個(gè)屬性。如果想要給選中文本設(shè)置font-size等屬性，很可惜目前還不行。

參考列表

• CSS3 ::selection 選擇器
• CSS ::Selection