为何body.blog下p标签的::selection CSS选择器无法生效？

你的文本选中样式未生效，核心原因是选择器优先级不足，无法覆盖页面中其他作用于该<p>标签的选中样式（比如引入的框架样式或其他自定义样式）。

解决方案1：提升选择器优先级 #

直接结合<p>标签的类选择器来定位，提升优先级确保样式生效：

body.blog p.text-condensed-light::selection,
body.blog p.text-condensed-light::-moz-selection {
  color: red;
  /* 建议同时设置背景色，避免与浏览器默认选中样式冲突 */
  background-color: #f0f0f0;
}

解决方案2：使用!important（应急方案，不推荐） #

如果暂时无法调整选择器结构，可以用!important强制覆盖其他样式：

body.blog p::selection,
body.blog p::-moz-selection {
 color: red !important;
}

补充说明 #

• ::selection伪元素的优先级计算规则和普通选择器一致，当存在多个同类型样式时，优先级更高的样式会生效。
• 多数浏览器对::selection的样式支持有限，仅允许设置color、background-color、text-shadow等少数属性，避免设置其他无效属性。

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