5

问题

使用以下内容在浏览器-webkit-中根本无法正常工作：-moz-

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

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

 

结果：WebKit 和 Blink 驱动的浏览器

在 Chrome、Opera 和 Safari 中，::selection的background-color呈现好像是 50% 的 alpha 但字体颜色是正确的。

铬 29.0.1547.62：
铬 29.0.1547.62

歌剧 15.0.1147.130：
歌剧 15.0.1147.130

Safari 5.34.57.2：
Safari 5.34.57.2

 

结果：Gecko 驱动的浏览器

在 Firefox 中，整个::selection规则被忽略。由于' 的黑暗， ::selection'background-color恰好是白色的（感谢@BoltClock 注意到这一点）#exampleElementbackground-color

火狐 22.0：
火狐 22.0

 

结果：支持 Trident 的浏览器

在 Internet Explorer 中，（您相信吗）一切都完美呈现。

Internet Explorer 10.0.9200.16660：
Internet Explorer 10.0.9200.16660

 

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

我在 jsFiddle 上保存了一个示例，供人们查看：http: //jsfiddle.net/BWGJ2/

4

2 回答 2

4

根据quirksmode.org，-webkit-selection确实-moz-selection可用。我刚刚使用 Chrome (18) 和 Firefox (13) 对其进行了测试，并且可以确认它可以与 Firefox 一起使用，但是我在 Chrome 上没有成功-webkit-selection（它忽略了它），并且根据这个 SO question它不存在（答案说这也::selection 应该适用于所有浏览器，但也不适用于我）。

正如这个答案中已经提到的那样，Chrome 强制选择透明，但您可以使用解决此问题

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

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

此外，这在 FF 上对我有用：

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

但这不会：

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

但也许这与所有伪元素无关::selection但确实适用于所有伪元素，找不到答案。

于 2012-06-17T23:43:26.897 回答
0

有依赖于浏览器的版本。您使用的版本是标准的 CSS3 方式，但后来它从 spec中删除了。我不知道它的浏览器支持...

还有其他需要考虑的事情：基于 ID 的 CSS 选择器可能会“超过”基于伪类的选择器，从而导致基于 ID 的 CSS 始终优先。因此，请尝试添加!important到您的::selection样式中，以确保在适用时始终使用它。

希望有帮助！

于 2012-06-17T23:25:53.543 回答