如何使用CSS3的selection改變選中文本顏色

這篇文章主要講解了“如何使用CSS3的selection改變選中文本顏色”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何使用CSS3的selection改變選中文本顏色”吧！

瀏覽器上頁面文字選中后默認的背景色是一種藍色， 不同瀏覽器的顏色有些許差異，但大致相同，文字顏色也近乎白色，如下圖所示，截自Firefox3.6瀏覽器：

在CSS3的爸爸媽媽還沒有相親認識的時候，要改變頁面上文字選中后的背景色以及文字顏色，就跟讓太監生孩子一樣困難。但是，隨著CSS3呱呱落地，獲得越來越多的瀏覽器認可，一切又顯得那么自然而然。雖然有些頑固的糟老頭（如IE瀏覽器）還不認可這個新生的CSS3，但是，絲毫不影響其在其他瀏覽器上對UI的又一次改進。
目前Firefox、Safari、Chrome以及Opera瀏覽器都支持文本選擇屬性，如果瀏覽器不支持該屬性，會直接忽略它，所以不會產生任何不良的影響。
下面就簡單展示下這個改進UI體驗的小技巧。
改變默認選中顏色
首先，簡單點的例子，我們可以設置整個頁面文本選中的基本樣式，如下：

CSS Code復制內容到剪貼板

1. ::selection {   

2.     background:#d3d3d3;    

3.     color:#555;   

4. }   

5.   

6. ::-moz-selection {   

7.     background:#d3d3d3;    

8.     color:#555;   

9. }   

10.   

11. ::-webkit-selection {   

12.     background:#d3d3d3;    

13.     color:#555;   

14. }  

于是，文本選中的默認藍色背景就此變成了淡灰色，如下圖所示，截自Chrome瀏覽器：

當然，我們可以使用CSS選擇器指定特定標簽內容文字選中后的樣式狀態，例如下面所展示的栗色選中狀態：

CSS Code復制內容到剪貼板

1. .maroon::selection {   

2. background:maroon;    

3. color:#fff;   

4. }   

5.   

6. .maroon::-moz-selection {   

7. background:maroon;    

8. color:#fff;   

9. }   

10.   

11. .maroon::-webkit-selection {   

12. background:maroon;    

13. color:#fff;   

14. }   

15. <p class="maroon">...文字內容。</p>  

會得到類似下圖的效果：

簡而言之，要改變選中文本的顏色和背景顏色，需要使用 CSS3 新增的偽 ::selection，設置顏色 color 和背景顏色 background-colcr 即可，如：

CSS Code復制內容到剪貼板

1. ::selection { color:#333; background-color:#cce8cf;}   

2. ::-moz-selection { color:#333; background-color:#cce8cf;}   

3. ::-webkit-selection { color:#333; background-color:#cce8cf;}  

上面的代碼效果如下圖（截自 Firefox 5 瀏覽器）：

當然，你也可以結合CSS選擇器，指定標簽或區域文本選中后的樣式狀態。如：

CSS Code復制內容到剪貼板

1. h2::selection { color:#f60; background-color:#cce8cf;}   

2. p::selection { color:#333; background-color:#cce8cf;}   

3.   

4. h2::-moz-selection { color:#f60; background-color:#cce8cf;}   

5. p::-moz-selection { color:#333; background-color:#cce8cf;}   

6.   

7. h2::-webkit-selection { color:#f60; background-color:#cce8cf;}   

8. p::-webkit-selection { color:#333; background-color:#cce8cf;}  

大部分標簽使用 selection 沒有問題，但 a 標簽在不同的瀏覽器下有差異，有的瀏覽器 a 標簽不會應用上 ::selection 樣式（如 FF5，Chrome12），有些瀏覽器則會應用上 ::selection 樣式（如 Opera 11.50）。這可能是有的瀏覽器認為a比較重要，為了讓用戶知道這是鏈接，所以不改變顏色。

感謝各位的閱讀，以上就是“如何使用CSS3的selection改變選中文本顏色”的內容了，經過本文的學習后，相信大家對如何使用CSS3的selection改變選中文本顏色這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！