要实现文本选中自定义颜色，需使用css的::selection伪元素设置background-color和color属性；1. 使用::selection定义全局选中样式，支持color和background-color属性；2. 为兼容旧版firefox需同时定义::-moz-selection；3. 特定元素或区域可通过选择器限定如.article-content::selection实现局部样式；4. 样式失效可能因浏览器兼容性、样式覆盖、特殊元素限制或资源加载问题；5. 仅color和background-color广泛支持，其他如text-decoration等属性兼容性差且效果有限。
文本选中自定义颜色，主要通过CSS的
::selection伪元素来实现。这个伪元素允许你改变用户选中文本时的背景色和文字颜色，让你的网站或应用在细节处也能保持统一的视觉风格。
解决方案
要定制文本选中时的颜色，你只需要对
::selection伪元素应用
background-color和
color属性。
/* 全局设置文本选中样式 */
::selection {
background-color: #ffcc00; /* 选中时的背景色，这里是橙黄色 */
color: #333; /* 选中时的文字颜色，这里是深灰色 */
}
/* 针对Firefox浏览器的兼容性写法 */
::-moz-selection {
background-color: #ffcc00;
color: #333;
}这段代码会把页面上所有文本被选中时的背景色设为
#ffcc00，文字颜色设为
#333。如果你想让用户在选中文字时，体验到一种定制化的视觉反馈，这无疑是个简单又直接的方法。
立即学习“前端免费学习笔记（深入）”；
::selection伪类支持哪些CSS属性？
说实话，
::selection伪类支持的CSS属性并不多，这其实是浏览器厂商为了避免滥用和保持用户体验的一种限制。在我看来，这挺合理的，毕竟选中文本只是一个瞬时状态，搞得太花哨反而会分散注意力。
目前，主流浏览器普遍稳定支持的属性主要是：
color
: 用于设置选中文本的前景色（文字颜色）。background-color
: 用于设置选中文本的背景色。
除了这两个，一些浏览器可能还会有限地支持
text-decoration（文本装饰，比如下划线）、
text-shadow（文本阴影）、
stroke-color（SVG文本描边颜色）和
fill-color（SVG文本填充颜色）。但实际项目中，我很少会去动这些，因为兼容性不如
color和
background-color来得可靠，而且它们的效果在选中文本这种场景下，也显得不那么重要。如果你尝试设置
font-size、
margin、
padding、
border之类的属性，你会发现它们根本不起作用。所以，通常我们只关注颜色。
为什么我的::selection设置有时不起作用？
有时候，你可能会发现明明写了
::selection的CSS，但实际效果却不尽如人意，或者在某些情况下压根没生效。这背后可能有几个原因，我的经验告诉我，排查起来通常围绕这几点：
一个常见的原因是浏览器兼容性问题。虽然现在
::selection的支持度已经很广了，但如果你还在维护一些老旧的项目，或者用户群体中有使用非常旧版本浏览器的，那可能就会遇到问题。特别是Firefox，它曾经需要
::-moz-selection这个前缀才能生效，虽然现在新版Firefox也支持无前缀的
::selection了，但为了保险起见，双重声明仍然是一个好习惯。
再来，样式覆盖也是一个可能的原因。尽管
::selection的特异性（specificity）通常比较高，不容易被一般规则覆盖，但如果你的CSS中存在更具体的选择器，或者使用了
!important，那它就有可能被覆盖掉。比如说，你给某个
div设置了特定的
div::selection样式，而全局又有一个
::selection，那么
div内部的文本选中时，会优先应用更具体的
div::selection。
还有一点，一些特殊元素的行为可能与普通文本不同。比如
input、
textarea这样的表单元素，它们的文本选中行为有时候会比较顽固，可能不会完全遵循你设定的
::selection样式，或者需要额外的CSS规则才能达到预期。这通常是浏览器自身对表单元素的默认样式和行为有更强的控制权。
最后，检查一下你的CSS文件是否正确加载，以及是否有其他脚本在运行时动态修改了样式。这虽然不是
::selection本身的问题，但在调试时也值得留意。
如何为特定区域或元素定制文本选中颜色？
如果你不希望整个网站的文本选中颜色都一样，而是想为特定区域或者某个元素设置独特的选中样式，
::selection伪元素同样可以做到。这在设计上能提供很大的灵活性，比如不同主题区域、代码块、引用文本等，都可以有自己独特的选中视觉反馈。
要实现这一点，你只需要在
::selection前面加上你想要限定的选择器即可。
举个例子，如果你有一个特定的文章内容区域，它的class是
article-content，你想让这个区域的文本选中时有不同的颜色：
/* 全局默认选中样式 */
::selection {
background-color: #e0e0e0;
color: #000;
}
::-moz-selection {
background-color: #e0e0e0;
color: #000;
}
/* 为文章内容区域定制选中样式 */
.article-content::selection {
background-color: #a3daff; /* 浅蓝色背景 */
color: #1a5e8a; /* 深蓝色文字 */
}
.article-content::-moz-selection {
background-color: #a3daff;
color: #1a5e8a;
}
/* 如果是代码块，可以设置得更低调 */
pre::selection,
code::selection {
background-color: #444; /* 深色背景 */
color: #f8f8f2; /* 浅色文字，适合代码主题 */
}
pre::-moz-selection,
code::-moz-selection {
background-color: #444;
color: #f8f8f2;
}通过这种方式，你可以根据页面不同部分的语义或视觉需求，精细化地控制文本选中时的表现。这种做法不仅让设计更统一，也提升了用户在与内容互动时的体验感。记住，CSS的层叠和特异性规则在这里依然适用，更具体的选择器会覆盖掉更通用的规则。
