css中可以使用“::selection”選擇器來(lái)實(shí)現(xiàn)鼠標(biāo)選中文字后改變背景色效果,只需給文字元素E添加“E::selection{background: 背景色值;}”樣式即可。
本教程操作環(huán)境:windows7系統(tǒng)、css3版本、Dell G3電腦。
教程推薦:css視頻教程
css實(shí)現(xiàn)鼠標(biāo)選中文字后改變背景色
css鼠標(biāo)選中文字后改變背景色可以使用::selection選擇器。
::selection選擇器匹配元素中被用戶選中或處于高亮狀態(tài)的部分。::selection只可以應(yīng)用于少數(shù)的CSS屬性:color、background、cursor和outline。
代碼示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> p { border: 1px solid red; } .color::-moz-selection { background: #93c; color: #fcf; } .color::selection { background: #93c; color: #fcf; } </style> </head> <body> <p>默認(rèn)文本。測(cè)試文本!測(cè)試文本!測(cè)試文本!測(cè)試文本!測(cè)試文本!測(cè)試文本!測(cè)試文本!測(cè)試文本!測(cè)試文本!測(cè)試文本!</p> <p class="color">鼠標(biāo)選中文字后改變背景色。測(cè)試文本!測(cè)試文本!測(cè)試文本!測(cè)試文本!測(cè)試文本!測(cè)試文本!測(cè)試文本!測(cè)試文本!測(cè)試文本!測(cè)試文本!</p> </body> </html>
效果圖: