Css ：：选择背景色和浏览器中的颜色渲染 问题

在

-webkit-

和

-moz-

浏览器中，使用以下内容根本无法正常工作：

#exampleElement {
    background-color: red; /* For example */
}

#exampleElement ::selection {
    color: black;
    background-color: white;
}

结果：支持WebKit和Blink的浏览器 在Chrome、Opera和Safari中，

：：选择的
背景色
呈现为50%的alpha，但字体颜色正确

铬29.0.1547.62:


歌剧15.0.1147.130:


狩猎5.34.57.2:



结果：Gecko支持的浏览器
在Firefox中，整个
：：选择规则被忽略<代码>：：由于
#examplelement
的背景颜色为深色，因此选择的
背景颜色恰好为白色（感谢@BoltClock注意到这一点）

Firefox 22.0:



结果：三叉戟驱动的浏览器
在Internet Explorer中，（您相信吗）一切都被完美地呈现出来了

Internet Explorer 10.0.9200.16660:



这只是这些渲染引擎/浏览器的一个缺陷，还是有我不知道的
-webkit-
和
-moz-
替代方案

我在JSFIDLE上保存了一个这样的示例，供人们查看：
有。您使用的版本是标准的CSS3方式，但后来它得到了支持。我不知道它对浏览器的支持

还有一点需要考虑：基于ID的CSS选择器可能是基于伪类的选择器，导致基于ID的CSS总是优先。因此，请尝试添加
！重要信息
到您的
：：选择
样式以确保在适用时始终使用它

希望有帮助
 根据，
-webkit selection
和
-moz selection
确实可用。我刚刚用Chrome（18）和Firefox（13）测试了它，可以确认它可以与Firefox一起使用，但是我在Chrome上的
-webkit selection
没有成功（它忽略了它），而且据我所知它不存在（答案是
：：selection
也可以在所有浏览器上使用，但对我来说也不适用）

如中所述，Chrome强制选择透明，但您可以使用

background:rgba(255, 255, 255, 0.99);

有关更多详细信息，请查看tw16的链接答案


此外，这在FF上对我很有效：

::selection { /* stuff */ }
::-moz-selection { /* stuff */}

但这并不是：

::selection, ::-moz-selection { /* stuff */ }

但这可能与
：selection
无关，但确实适用于所有伪元素，无法找到答案。
是的，看起来很神奇，IE9确实有效！Firefox实际上忽略了整个
：：selection
规则-如果它确定父背景足够暗，不能使用蓝色作为背景，则默认高亮背景恰好是白色。@BoltClock定位正确。我将更新我的问题。奇怪的是，使用适当的依赖浏览器的版本同样无效，有时甚至效率更低@BenHooper——Mozilla特有的版本（错误地应用于“Webkit”div）是唯一适合我的版本（Fedora上的Firefox12.0）。它至少正确地覆盖了基于ID的选择器。我确实有时讨厌浏览器……它被删除是因为它在CSS3中的定义充其量是不完整的，所以从来没有真正的“标准”可以遵循。另外，
：：selection
是一个伪元素，它的权重甚至比伪类还要小。因此，忽略
-webkit选择
。嗯。RGBA方法在Chrome 19中对我不起作用？：/哦，对不起，我的回答错了。您需要使用
0.99
而不是
1
，出于某种原因，如果您使用1，Chrome会使其透明。下面将编辑答案。您需要拆分规则的原因在这里有详细说明：这适用于所有选择器，而不仅仅是伪元素。还要注意，但这与此处无关，因为它已经使用了unfixed
：：selection
。