如何使用CSS3的selection改變選中文本顏色
這篇文章主要講解了“如何使用CSS3的selection改變選中文本顏色”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何使用CSS3的selection改變選中文本顏色”吧！
靖宇網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站等網(wǎng)站項目制作，到程序開發(fā)，運(yùn)營維護(hù)。成都創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運(yùn)維經(jīng)驗，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。
瀏覽器上頁面文字選中后默認(rèn)的背景色是一種藍(lán)色， 不同瀏覽器的顏色有些許差異，但大致相同，文字顏色也近乎白色，如下圖所示，截自Firefox3.6瀏覽器：
在CSS3的爸爸媽媽還沒有相親認(rèn)識的時候，要改變頁面上文字選中后的背景色以及文字顏色，就跟讓太監(jiān)生孩子一樣困難。但是，隨著CSS3呱呱落地，獲得越來越多的瀏覽器認(rèn)可，一切又顯得那么自然而然。雖然有些頑固的糟老頭（如IE瀏覽器）還不認(rèn)可這個新生的CSS3，但是，絲毫不影響其在其他瀏覽器上對UI的又一次改進(jìn)。
目前Firefox、Safari、Chrome以及Opera瀏覽器都支持文本選擇屬性，如果瀏覽器不支持該屬性，會直接忽略它，所以不會產(chǎn)生任何不良的影響。
下面就簡單展示下這個改進(jìn)UI體驗的小技巧。
改變默認(rèn)選中顏色
首先，簡單點的例子，我們可以設(shè)置整個頁面文本選中的基本樣式，如下：
CSS Code復(fù)制內(nèi)容到剪貼板
::selection {
background:#d3d3d3;
color:#555;
}
::-moz-selection {
background:#d3d3d3;
color:#555;
}
::-webkit-selection {
background:#d3d3d3;
color:#555;
}
于是，文本選中的默認(rèn)藍(lán)色背景就此變成了淡灰色，如下圖所示，截自Chrome瀏覽器：
當(dāng)然，我們可以使用CSS選擇器指定特定標(biāo)簽內(nèi)容文字選中后的樣式狀態(tài)，例如下面所展示的栗色選中狀態(tài)：
CSS Code復(fù)制內(nèi)容到剪貼板
.maroon::selection {
background:maroon;
color:#fff;
}
.maroon::-moz-selection {
background:maroon;
color:#fff;
}
.maroon::-webkit-selection {
background:maroon;
color:#fff;
}
會得到類似下圖的效果：
簡而言之，要改變選中文本的顏色和背景顏色，需要使用 CSS3 新增的偽 ::selection，設(shè)置顏色 color 和背景顏色 background-colcr 即可，如：
CSS Code復(fù)制內(nèi)容到剪貼板
::selection { color:#333; background-color:#cce8cf;}
::-moz-selection { color:#333; background-color:#cce8cf;}
::-webkit-selection { color:#333; background-color:#cce8cf;}
上面的代碼效果如下圖（截自 Firefox 5 瀏覽器）：
當(dāng)然，你也可以結(jié)合CSS選擇器，指定標(biāo)簽或區(qū)域文本選中后的樣式狀態(tài)。如：
CSS Code復(fù)制內(nèi)容到剪貼板
h2::selection { color:#f60; background-color:#cce8cf;}
p::selection { color:#333; background-color:#cce8cf;}
h2::-moz-selection { color:#f60; background-color:#cce8cf;}
p::-moz-selection { color:#333; background-color:#cce8cf;}
h2::-webkit-selection { color:#f60; background-color:#cce8cf;}
p::-webkit-selection { color:#333; background-color:#cce8cf;}
大部分標(biāo)簽使用 selection 沒有問題，但 a 標(biāo)簽在不同的瀏覽器下有差異，有的瀏覽器 a 標(biāo)簽不會應(yīng)用上 ::selection 樣式（如 FF5，Chrome12），有些瀏覽器則會應(yīng)用上 ::selection 樣式（如 Opera 11.50）。這可能是有的瀏覽器認(rèn)為a比較重要，為了讓用戶知道這是鏈接，所以不改變顏色。
感謝各位的閱讀，以上就是“如何使用CSS3的selection改變選中文本顏色”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對如何使用CSS3的selection改變選中文本顏色這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
本文題目：如何使用CSS3的selection改變選中文本顏色
本文路徑：http://m.jiaotiyi.com/article/jgocjc.html