CSS选择样式删除其他样式

Question

我正在开发一个带有自定义拼写检查器的文本编辑器。它在拼错的单词周围添加了一个css类，在单词下面显示一个红色之字形。

我还使用一个类来为编辑器中的选择设置自定义背景色的样式。

.spell-error {
background-image: url("data:image/gif;base64,R0lGODlhBAADAIABAP8AAP///yH5BAEAAAEALAAAAAAEAAMAAAIFRB5mGQUAOw=="); 
background-position: bottom; 
background-repeat: repeat-x;
}
::selection {
background-color: #99def7;
}
::-moz-selection {
background-color: #99def7;
}

<p>There is a <span class="spell-error">misstake</span> in this sentence</p>

问题是当我用.spell-error突出显示一个单词时，红色之字形消失了。我试过创建一个.spell-error::selection类，但问题仍然存在。如何使两个类同时出现?

Answer 1

background-image将有一个白色的背景覆盖在背景颜色上。
您需要为.spell-error::selection设置一个特定的背景图像，该背景图像在实际图像中具有正确的背景颜色。