用CSS美化被滑鼠選中的文字的樣式

2021-06-21 14:42:47 字數 796 閱讀 8808

css的作用就是用來美化網頁的內容或者結構層次。這我們都知道,不是嗎?隨著css技術的不斷革新公升級,我們獲得了更多的控制樣式的能力。乙個不是那麼眾所周知的技術就是我們可以在瀏覽器裡美化被選擇的文字的樣式。windows自身提供的是一種很難看的墨綠色的顏色,而蘋果電腦上提供的是淺綠色。火狐瀏覽器,ie9,opera和谷歌瀏覽器允許我們自定義被選擇文字的顏色。讓我來展示給你看:

**演示

/* webkit, opera, ie9 */

::selection

/* mozilla firefox */

::-moz-selection

-moz-屬性字首是個火狐瀏覽器用的,而基本的::selection選擇器是給谷歌瀏覽器用的。跟其它css選擇器的用法一樣,你可以巢狀使用,在不同的地方顯示不同的顏色:

/* webkit, opera, ie9 */

div.highlightblue::selection

/* mozilla firefox */

div.highlightblue::-moz-selection

/* webkit, opera, ie9 */

div.highlightpink::selection

/* mozilla firefox */

div.highlightpink::-moz-selection

**演示

用css美化被選擇的文字只是一種很簡單的技巧,但這些都能讓你的**頁面更絢麗、更多彩!

CSS如何美化被選中的文字

css的作用就是用來美化網頁的內容或者結構層次。這我們都知道,不是嗎?隨著css技術的不斷革新公升級,我們獲得了更多的控制樣式的能力。乙個不是那麼眾所周知的技術就是我們可以在瀏覽器裡美化被選擇的文字的樣式。windows自身提供的是一種很難看的墨綠色的顏色,而蘋果電腦上提供的是淺綠色。火狐瀏覽器,i...

js獲取滑鼠選中的文字

定義需要獲取的內容的節點 onclick selecttext 河中魚類離奇死亡,下游居民頻染怪病,沿岸植物不斷變異,是殘留農藥?還是生化攻擊?span 獲取選中的文字,我們使用window.getselection tostring 方法。如下 function selecttext catch ...

js獲取滑鼠選中的文字

1 獲取選中的文字 document.selection.createrange text ie9以下使用 window.getselection tostring 其他瀏覽器使用 p mouseup function 2 取消處於選中狀態的文字 document.selection.empty i...