CSS `::selection` 伪元素[编辑 | 编辑源代码]

::selection 是 CSS 中的一个伪元素，用于设置用户在页面上选中文本时的样式。通过它，开发者可以自定义文本被选中时的背景颜色、文字颜色、阴影等效果，从而提升用户体验和页面的视觉一致性。

基本语法[编辑 | 编辑源代码]

::selection 伪元素的语法如下：

::selection {
    /* 可用的样式属性 */
    background-color: #ff0000;
    color: #ffffff;
    text-shadow: 1px 1px 1px #000;
}

支持的属性包括：

background-color
color
text-shadow
cursor（部分浏览器支持）
outline（部分浏览器支持）

兼容性说明[编辑 | 编辑源代码]

::selection 在现代浏览器中广泛支持，但在旧版本浏览器（如 IE 8 及以下）中可能无效。某些浏览器（如 Firefox）需要添加 -moz- 前缀：

::-moz-selection {
    background-color: #ff0000;
    color: #ffffff;
}

示例代码[编辑 | 编辑源代码]

以下是一个完整的示例，展示如何自定义选中文本的样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>::selection 示例</title>
    <style>
        /* 标准语法 */
        ::selection {
            background-color: #4CAF50;
            color: white;
            text-shadow: none;
        }

        /* Firefox 兼容语法 */
        ::-moz-selection {
            background-color: #4CAF50;
            color: white;
            text-shadow: none;
        }

        p {
            font-family: Arial, sans-serif;
            font-size: 16px;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <p>尝试选中这段文本，可以看到背景变为绿色，文字变为白色。</p>
</body>
</html>

输出效果[编辑 | 编辑源代码]

当用户选中文本时：

背景颜色变为绿色（#4CAF50）
文字颜色变为白色
文本阴影被移除

实际应用场景[编辑 | 编辑源代码]

1. 品牌一致性：让选中的文本颜色与网站主题色匹配。 2. 可读性优化：在深色背景下，默认的蓝色选中效果可能不清晰，可以调整为高对比度颜色。 3. 交互反馈：在可交互区域（如按钮或链接）中，自定义选中样式以增强用户体验。

案例：深色主题的选中样式[编辑 | 编辑源代码]

在深色背景的网站上，默认的浅蓝色选中效果可能不够明显。以下是一个优化方案：

body {
    background-color: #121212;
    color: #e0e0e0;
}

::selection {
    background-color: #BB86FC; /* Material Design 紫色 */
    color: #000000;
}

注意事项[编辑 | 编辑源代码]

不支持 background-image 或 border 等复杂样式。
某些浏览器可能限制可用的属性（如仅支持 color 和 background-color）。
避免使用低对比度的颜色组合，以确保可访问性。

浏览器支持[编辑 | 编辑源代码]

以下是主流浏览器对 ::selection 的支持情况（截至 2023 年）：

总结[编辑 | 编辑源代码]

::selection 是一个简单但强大的 CSS 功能，允许开发者自定义文本选中样式。通过合理使用，可以提升网站的视觉一致性和用户体验。建议始终测试跨浏览器兼容性，并确保颜色选择符合可访问性标准。

CSS ::selection 伪元素[编辑 | 编辑源代码]