css - 在 CSS 中使用::first-letter 时，Personalized::selection 不起作用

Question

我现在正在学习 CSS 基础知识，我在测试页面上发现了一些奇怪的东西。我正在写下 ::first-letter 和 ::first-line 的用法，出于习惯，我选择了全部。由于某种原因，当选择第一个单词时，我的 ::selection 个性化缺失。更奇怪的是，这只是一封信。一瞬间我想这可能是因为我将字体粗细设置为粗体，但其他粗体字母工作得很好。

::selection{
    background-color: #8ebacc;
    color: black;
}

#first::first-letter{
    font-size: 30px;
    color: black;
    font-weight: bold;
}

#first::first-line{
    font-variant: small-caps;
    font-size: 20px;
}

<p id="first">Here I wrote a lot of text. This first line is very fancy, and even fancier is the first letter. This is to give some emphasis to everything there, to establish that that is indeed the first line of this paragraph. </p>

发生什么事了？我该如何修复它？

Answer 1

在 chrome 中使用 ::first-letter 和 ::selection 无法正常工作。这是一个已知错误，已经由 chrome 开发人员提出，但尚未修复。

如果您可以使用 firefox，您可以考虑使用 ::mox-selection，这在 Mozilla firefox 中应该可以正常工作。

You can follow the developments and update: https://bugs.chromium.org/p/chromium/issues/detail?id=17528