::selection

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

::selection CSS 偽元素 用於將樣式應用於使用者高亮顯示(例如透過點選並拖動滑鼠選擇文字)的文件部分。

::selection 偽元素遵循所有高亮偽元素共有的特殊繼承模型。有關此繼承如何工作的更多詳細資訊,請參閱高亮偽元素繼承部分。

試一試

p::selection {
  color: red;
  background-color: yellow;
}
<p>
  Select a fragment of this paragraph, to see how its appearance is affected.
</p>

允許的屬性

只有特定的 CSS 屬性可以與 ::selection 一起使用。

特別是,background-image 會被忽略。

語法

css
::selection {
  /* ... */
}

無障礙

不要僅僅出於美觀原因覆蓋選定文字的樣式——使用者可以根據自己的需要自定義它們。對於有認知障礙或技術知識較少的人來說,選擇樣式意外的更改可能會損害他們對功能的理解。

如果被覆蓋,重要的是確保選定文字和背景顏色之間的對比度足夠高,以便有低視力障礙的人能夠閱讀它。

顏色對比度是透過比較選定文字和選定文字背景顏色的亮度來計算的。為了符合當前的網頁內容無障礙指南 (WCAG),文字內容的對比度必須達到 4.5:1,對於標題等較大文字則為 3:1。(WCAG 將大文字定義為介於 18.66px24px 之間並加粗,或 24px 或更大。)

示例

HTML

html
This text has special styles when you highlight it.
<p>Also try selecting text in this paragraph.</p>

CSS

css
/* Make selected text gold on a red background */
::selection {
  color: gold;
  background-color: red;
}

/* Make selected text in a paragraph white on a blue background */
p::selection {
  color: white;
  background-color: blue;
}

結果

規範

規範
CSS 偽元素模組 Level 4
# selectordef-selection

瀏覽器相容性

另見