编辑“︁CSS code selection code 伪元素”︁

= CSS <code>::selection</code> 伪元素 =

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

== 基本语法 ==
<code>::selection</code> 伪元素的语法如下：

<syntaxhighlight lang="css">
::selection {
    /* 可用的样式属性 */
    background-color: #ff0000;
    color: #ffffff;
    text-shadow: 1px 1px 1px #000;
}
</syntaxhighlight>

支持的属性包括：
* <code>background-color</code>
* <code>color</code>
* <code>text-shadow</code>
* <code>cursor</code>（部分浏览器支持）
* <code>outline</code>（部分浏览器支持）

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

<syntaxhighlight lang="css">
::-moz-selection {
    background-color: #ff0000;
    color: #ffffff;
}
</syntaxhighlight>

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

<syntaxhighlight lang="html">
<!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>
</syntaxhighlight>

=== 输出效果 ===
当用户选中文本时：
* 背景颜色变为绿色（<code>#4CAF50</code>）
* 文字颜色变为白色
* 文本阴影被移除

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

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

<syntaxhighlight lang="css">
body {
    background-color: #121212;
    color: #e0e0e0;
}

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

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

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

<mermaid>
pie
    title ::selection 浏览器支持
    "Chrome" : 95
    "Firefox" : 90
    "Safari" : 85
    "Edge" : 95
    "Opera" : 80
</mermaid>

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

[[Category:CSS高级选择器]]

[[Category:编程语言]]
[[Category:CSS]]