css - 避免突出显示选择与 CSS 重叠

Question

当我选择 line-height 小于 font-size 的文本时，如何避免突出显示重叠？

示例:

*::selection {
  background-color: grey;
}

p {
  font-size: 24px;
  line-height: 20px;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

我能够解决此问题的唯一方法是使 background-color 透明 并仅更改文本颜色。不过我还是想保留背景颜色。

示例

*::selection {
  background-color: transparent;
  color: red;
}

p {
  font-size: 24px;
  line-height: 20px;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Answer 1

我觉得没有办法，选择背景必须覆盖整个字母表，包括所有特殊字符，如 ƒ、È、¡ 等。