本文深入探讨了CSS `::selection` 伪元素在样式设置时可能遇到的问题，特别是当浏览器遇到不支持的选择器时，会忽略整个CSS规则的特性。教程将指导您如何通过分离规则来正确应用选中文本样式，确保跨浏览器兼容性，并提供最佳实践建议，以避免因浏览器兼容性差异导致的样式失效。
理解 ::selection 伪元素
::selection 伪元素允许开发者改变用户选中页面文本时的样式。这通常用于定制选中文本的背景色和文本颜色，以更好地符合网站的设计主题。例如，您可能希望选中的文本显示为红色，背景为蓝色。
然而，在使用 ::selection 时，由于浏览器对CSS选择器的解析机制和兼容性差异，可能会遇到样式不生效的问题。
问题根源：分组选择器与浏览器解析行为
当您尝试为 ::selection 和其带前缀的变体（如 ::-moz-selection）应用相同的样式时，一个常见的错误是将它们合并在一个CSS规则中。例如：
立即学习“前端免费学习笔记（深入）”；
body.blog p::selection,
body.blog p::-moz-selection {
color: red;
background-color: yellow; /* 示例添加背景色 */
}表面上看，这种写法简洁且符合CSS的通用分组选择器语法。但问题在于，当浏览器解析一个CSS规则时，如果它遇到一个不支持的选择器，它会忽略整个规则。
这意味着：
- 如果一个浏览器（例如，现代Chrome）不支持 ::-moz-selection，那么即使它支持 ::selection，整个规则也会被忽略，导致 p::selection 的样式也无法生效。
- 反之，如果一个浏览器（例如，旧版Firefox）不支持 ::selection 但支持 ::-moz-selection，整个规则同样会被忽略，样式同样不生效。
因此，即使您的意图是为不同浏览器提供兼容性样式，这种分组写法反而会阻碍样式在任何浏览器中生效。
解决方案：分离兼容性规则
解决这个问题的关键在于，将针对不同浏览器或不同伪元素的规则进行分离。这样，即使某个浏览器不支持其中一个规则，也不会影响到它所支持的其他规则。
正确的做法是为每个 ::selection 及其前缀变体创建独立的CSS规则：
/* 针对现代浏览器和Webkit/Blink内核浏览器 */
p::selection {
color: red;
background-color: yellow; /* 示例添加背景色 */
}
/* 针对Firefox浏览器 */
p::-moz-selection {
color: red;
background-color: yellow; /* 示例添加背景色 */
}通过这种方式，当浏览器解析CSS时：
- 如果它是支持 ::selection 的现代浏览器，它会成功应用第一个规则。
- 如果它是支持 ::-moz-selection 的Firefox浏览器，它会成功应用第二个规则。
- 即使某个浏览器不支持其中一个，另一个规则也能正常生效，从而确保了最大的兼容性和样式覆盖。
示例代码
假设您的HTML结构如下：
<body class="blog"> <p class="text-condensed-light text-15-rem mt-20">This text should be red when selected.</p> <p>Another paragraph to test selection.</p> </body>
要确保段落文本在选中时显示为红色背景和黄色文本，您应该使用以下CSS：
/* 针对所有支持 ::selection 的浏览器 */
p::selection {
color: yellow; /* 选中文本颜色 */
background-color: red; /* 选中背景色 */
}
/* 针对 Firefox 浏览器 */
p::-moz-selection {
color: yellow; /* 选中文本颜色 */
background-color: red; /* 选中背景色 */
}注意事项
- 可样式属性限制： ::selection 伪元素只能设置有限的CSS属性。通常只支持 color、background-color 和 text-shadow。尝试设置其他属性（如 font-size, padding, margin 等）通常不会生效或被浏览器忽略。
- 前缀使用： 随着浏览器兼容性的提升，许多现代浏览器已经不再需要 ::-webkit-selection 等前缀，直接使用 ::selection 即可。但为了兼容旧版Firefox，::-moz-selection 仍然有其存在的价值。在实际项目中，可以根据目标用户群体的浏览器分布决定是否保留前缀。
- 选择器特异性： 确保您的 ::selection 选择器具有足够的特异性，以覆盖默认的浏览器样式。例如，p::selection 比 *::selection 更具体。
- 一致性： 尽量保持 ::selection 和 ::-moz-selection 的样式属性和值一致，以提供统一的用户体验。
总结
::selection 伪元素是提升用户体验的有效工具，但其使用需注意浏览器对分组选择器的解析行为。避免将 ::selection 及其带前缀的变体合并到同一个CSS规则中，而是应该将它们分离为独立的规则。这种做法可以确保在不同浏览器中都能正确应用选中文本样式，避免因兼容性问题导致的样式失效。遵循这些最佳实践，可以帮助您更稳定、高效地定制选中文本的视觉效果。
