CSS

CSS3中的::selection選擇器

字號+ 編輯: Snake 修訂: 面向ICU 來源: 慕课网 2023-09-12 我要說兩句(0)

“::selection”偽元素是用來匹配突出顯示的文本(用滑鼠選擇文本時的文本)。

::selection選擇器

“::selection”偽元素是用來匹配突出顯示的文本(用滑鼠選擇文本時的文本)。

瀏覽器默認情況下,用滑鼠選擇網頁文本是以“深藍的背景,白色的字體”顯示的,效果如下圖所示:

 圖片2.png

從上圖中可以看出,用滑鼠選中“專注IT、互聯網技術”、“純干貨、學以致用”、“沒錯、這是免費的”這三行文本中,默認顯示樣式爲:藍色背景、白色文本。

有的時候設計要求,不使用上圖那種瀏覽器默認的突出文本效果,需要一個與衆不同的效果,此時“::selection”偽元素就非常的實用。不過在Firefox瀏覽器還需要添加前綴。

通過“::selection”選擇器,將Web中選中的文本背景變成紅色,文本變成綠色。

HTML代碼:

<p>“::selection”偽元素是用來匹配突出顯示的文本。瀏覽器默認情況下,選擇網站文本是深藍的背景,白色的字體,</p>

CSS代碼:

::-moz-selection {
  background: red;
  color: green;
}
::selection {
  background: red;
  color: green;
}

結果演示:

圖片3.png

注意:

1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 選擇器。

2、Firefox 支持替代的 ::-moz-selection。

閲完此文,您的感想如何?
  • 有用

    1

  • 沒用

    1

  • 開心

    1

  • 憤怒

    0

  • 可憐

    0

1.如文章侵犯了您的版權,請發郵件通知本站,該文章將在24小時内刪除;
2.本站標注原創的文章,轉發時煩請注明來源;
3.交流群: 2702237 13835667

相關課文
  • 多個高度相同, 屬性inline-block的div,有的div沒有内容而有的div有内容,有内容的會下沉?

  • 讓整個網頁全局變成黑白色調的css代碼

  • CSS生成内容

  • CSS3外輪廓屬性

我要說說
網上賓友點評