::selection伪类在含::first-letter的文本上失效问题求助

这个问题其实是CSS伪元素层叠规则导致的——当你给文本设置了::first-letter样式后，它会优先覆盖全局::selection在首字母上的样式，哪怕加了!important也没用，因为浏览器对这类文本伪元素的渲染优先级有特殊处理。

解决方案：为::first-letter单独指定::selection样式 #

你需要针对首字母的选中状态单独写样式，明确覆盖::first-letter带来的干扰。完整代码如下：

<p>hello</p>

p::first-letter {
  font-size: 130%;
}

/* 全局文本选中样式 */
::selection {
  background: red;
  color: white;
}

/* 专门针对首字母的选中样式 */
p::first-letter::selection {
  background: red;
  color: white;
}

原理说明 #

::first-letter作为文本片段的特殊伪元素，它的样式会形成一个局部层叠上下文，全局的::selection无法穿透这个上下文去覆盖首字母的选中样式。通过直接声明p::first-letter::selection，我们相当于给首字母的选中状态单独设置了样式，优先级会高于::first-letter的默认层叠规则，这样就能让首字母和其他文本在选中时保持一致的样式了。

目前主流浏览器（Chrome、Firefox、Safari、Edge）都支持这种嵌套伪元素的写法，不用担心兼容性问题。

内容的提问来源于stack exchange，提问作者Hongbo Miao