CSS中的伪元素（::selection）详解

描述
::selection 是一个 CSS 伪元素，用于匹配用户选中（高亮）的文档部分。用户通过鼠标拖拽或键盘操作选中的文本、图片等内容的样式，可以通过此伪元素进行定制。它常用于提升视觉反馈和品牌一致性，但只能应用于少数样式属性。

解题过程循序渐进讲解

第一步：基本语法与浏览器支持

1. 语法格式为：

   ::selection {
        property: value;
   }
   

   某些旧版浏览器（如 Safari ≤ 8.0、Android ≤ 4.4）需要带单冒号的 :selection 前缀，但现代标准使用双冒号 :: 以区分伪类与伪元素。

2. 支持范围：

   • 适用于文本、图片、内联元素等。
   • 可设置样式的属性受限，仅允许以下属性：
     color、background-color、text-decoration、text-shadow、cursor、caret-color、outline 及其相关属性。

第二步：基础应用示例
假设需将选中文本改为黄色背景、红色文字：

::selection {
    background-color: yellow;
    color: red;
}

此时，用户用拖动鼠标选中任意文本时，高亮区域会按此样式显示。

第三步：针对特定元素应用
::selection 可附加到特定选择器，实现差异化效果。
示例：为段落设置特殊选中样式，而按钮保持默认：

p::selection {
    background-color: lightblue;
    color: black;
}
button::selection {
    background-color: orange; /* 仅对按钮内文本生效 */
}

第四步：结合复杂属性增强效果
虽然支持属性有限，但可使用 text-shadow 创造视觉层次。
示例：添加阴影避免纯色单调感：

::selection {
    background-color: #4a90e2;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

第五步：处理浏览器兼容性
为确保旧浏览器支持，可同时使用单冒号和双冒号：

::-moz-selection { /* Firefox 需特殊前缀 */
    background: #ff6b6b;
    color: white;
}
::selection {
    background: #ff6b6b;
    color: white;
}

第六步：实际应用场景与注意事项

1. 常见场景：

   • 品牌配色一致：将选中背景设为品牌主色。
   • 可读性优化：在深色模式下使用柔和的对比色。

2. 限制与注意事项：

   • 不能设置 background-image、width、height 等属性。
   • 选择非文本元素（如图片）时，仅能通过 background-color 影响其选中区域。
   • 若需禁用选中效果，可使用 user-select: none;，此时 ::selection 无效。

3. 示例综合代码：

/* 全局选中样式 */
::selection {
    background-color: #333;
    color: #f0f0f0;
    text-shadow: none;
}
/* 代码块选中样式 */
pre::selection {
    background-color: #6c5ce7;
    color: white;
}

总结
::selection 是增强交互细节的有效工具，通过简单几行代码即可提升视觉体验。使用时需注意属性限制与浏览器前缀，结合选择器可实现灵活定制。