html - 如何更改 dropcap 的选择颜色？

Question

我在 chrome 中遇到了一个奇怪的错误。

.dropcap {
  font-size: 150%;
}

section p::first-letter {
  font-size: 150%;
  /*@apply dropcap*/
}

*::-moz-selection, .dropcap::-moz-selection {
  background: #f7941d !important;
}
*::selection, .dropcap::selection {
  background: #f7941d !important;
}

/* *::-moz-selection {
  background: #f7941d !important;
}
*::selection {
  background: #f7941d !important;
} */

<section>
<p>hello world</p>
</section>

我已经尝试添加!important和定位所有元素*、定位dropcap类等。我的设置是使用 tailwind 和 jekyll，但这个错误出现在纯 HTML、CSS 和 JS 中。

我想知道如何更改选择颜色（除了单独dropcap为网站上每个段落中的每个起始字符添加一个类）

此错误的更多示例：

铬合金：

火狐：

在 chrome 中删除第 5-8 行（应用于第一个字母的样式）：首字 下沉仍然是较大的字体大小，但选择颜色现在可以使用。我想知道为什么会这样，以及我是否可以以某种方式设置首字母大写样式，而不会弄乱选择颜色或为网站每个页面上每个段落的每个第一个字符添加一个带类的跨度。

标签： htmlcssgoogle-chrome