30秒学会 CSS 片段 · 2019年11月2日

30秒学会 CSS 片段 – Custom text selection

Changes the styling of text selection.

  • ::selection defines a pseudo selector on an element to style text within it when selected. Note that if you don’t combine any other selector your style will be applied at document root level, to any selectable element.
  • Requires prefixes for full support and is not actually in any specification.

预览

Select some of this text.



HTML

<p class="custom-text-selection">Select some of this text.</p>

CSS

::selection {
  background: aquamarine;
  color: black;
}

.custom-text-selection::selection {
  background: deeppink;
  color: white;
}

翻译自:https://www.30secondsofcode.org/css/s/custom-text-selection