首字下沉(drop cap)选中文本样式与其余内容不一致该如何解决

你遇到的问题是Chromium内核浏览器（Brave基于Chromium开发）的默认伪元素样式规则导致的：::first-letter属于独立的CSS伪元素，全局定义的::selection选中样式默认不会自动作用到这类伪元素上，因此你会看到首字母选中效果和普通文本不一致。

你只需要额外补充一条针对首字母伪元素的选中样式规则即可，修改后的完整CSS代码如下：

.dropCaps:first-letter {
  font-family: "Open Sans";
  font-weight: bold;
  text-transform: uppercase;
  font-size: calc(110% + 2.85vw);
  line-height: calc(110% + .2vw);
}

/* 新增首字母选中样式规则 */
.dropCaps::first-letter::selection {
  background: #000;
  color: #fff;
}

::selection {
  background: #000;
  color: #fff;
}

原有HTML代码无需做任何调整，修改后全选文本时首字母就会正常应用你定义的选中样式。

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