CSS 选择器 ::selection

概述

::selection 是一个伪元素选择器，用于定义用户选中文本时的样式。此选择器可以应用于网页中的任何文本内容，允许开发者自定义选中文本时的背景颜色、文字颜色等视觉效果。

语法

selector::selection {
  color: <颜色值>;
  background-color: <颜色值>;
  /* 其他属性 */
}

支持情况

::selection 选择器是现代浏览器支持良好的选择器之一，但在一些较旧的浏览器版本中可能不被支持。为了确保广泛的兼容性，建议同时使用标准语法和浏览器前缀语法：

// www.javascriptcn.com code example
/* 标准语法 */
::selection {
  color: red;
  background-color: yellow;
}

/* WebKit 浏览器前缀 */
::-webkit-selection {
  color: red;
  background-color: yellow;
}

/* Firefox 浏览器前缀 */
::-moz-selection {
  color: red;
  background-color: yellow;
}

使用场景

自定义选中文本的外观

当你希望增强用户体验或创建独特的视觉效果时，可以使用 ::selection 来改变用户选中文本时的样式。例如，在新闻网站上，你可以将选中文本的背景设置为浅蓝色，以提高可读性和美观度。

创建交互式文本效果

通过改变选中文本的颜色和背景色，可以引导用户的注意力到特定的信息上，或者创建更吸引人的交互体验。

示例代码

假设我们有一个简单的 HTML 页面，其中包含一些段落文本：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>示例页面</title>
  <style>
    p::selection {
      color: white;
      background-color: blue;
    }

    p::-webkit-selection {
      color: white;
      background-color: blue;
    }

    p::-moz-selection {
      color: white;
      background-color: blue;
    }
  </style>
</head>
<body>
  <p>这是一个示例段落。你可以在这里选中文本，看看选中的文本会是什么样子。</p>
</body>
</html>

在这个例子中，当用户选中页面中的任何段落文本时，选中的文本将会显示为白色文字和蓝色背景。

注意事项

• ::selection 选择器仅适用于文本内容。它不会影响图像或其他非文本元素。
• 不同的浏览器可能会有不同的默认样式处理方式，因此建议测试不同浏览器下的表现。
• 考虑到可访问性，应谨慎使用 ::selection 选择器，避免使用过于突兀的颜色组合，以免影响用户的阅读体验。

结构化文本内容

当需要对大量文本进行样式调整时，可以通过 ::selection 选择器来实现。例如，可以在文章编辑器中添加这样的样式，使得用户在阅读或编辑文章时，能够更清晰地看到已选中的部分。

总结

::selection 选择器提供了一种简单而有效的方法来定制用户选中文本时的外观。通过合理的应用，不仅可以提升用户体验，还能使网页看起来更加专业和美观。