更改选择的颜色答案

【问题标题】：Change color of selection更改选择的颜色
【发布时间】：2011-08-05 08:50:56
【问题描述】：

当您在浏览器中选择文本时，被选中文本后面的背景通常会变为蓝色。如何将这种颜色更改为另一种颜色？

【问题讨论】：

标签： html css

【解决方案1】：

您正在寻找 selection 伪元素。

::-moz-selection{ background: #000; color:#fff;}
::selection { background:#000; color:#fff; }

另外，作为旁注。如果您打算在您的网站中使用 text-shadow，我建议您将 text-shadow:none; 添加到您的 ::selection 样式中。正如您在this fiddle 中看到的那样，真的很难看。

【讨论】：

如果您使用正确的名称“伪元素”，则更容易说出来。
@BoltClock 啊，但没那么有趣 XD。不过，我会确保将其更改为正确的措辞。
仅供参考，除了 IE8 之外，我什么都不担心，任何低于 IE8 的东西都几乎绝迹了。
我真的很惊讶也很高兴微软愿意在 IE9 中添加对 ::selection 的支持，即使它已经脱离了 CSS3 规范。

【解决方案2】：

看看这篇文章...

http://css-tricks.com/490-overriding-the-default-text-selection-color-with-css/

...所以是这样的：

p.moz::-moz-selection {
    background:#cc0000;
    color:#fff;
}

p.webkit::-webkit-selection {
    background:#cc0000;
    color:#fff;
}

p.normal::selection {
    background:#cc0000;
    color:#fff;
}

我希望这会有所帮助。
赫里斯托

【讨论】：

因为 CSS 级联，您应该始终确保将供应商前缀选择器放在其“标准化”选择器之上。否则，未来的浏览器仍会默认使用他们自己的供应商实现，即使他们添加了对标准化版本的支持。
@Moses...我不确定你的意思。
供应商前缀作为浏览器在这些功能被 W3C 正式标准化之前实现功能的一种手段。但是，一旦存在官方标准，未来的浏览器就没有理由要求前缀。使用您的代码，浏览器将首先遇到标准化的::selection，然后在样式表中看到::-moz-selection。因为浏览器现在可以同时理解两者，它会选择第二个，因为它是最后遇到的。这很糟糕，因为您很可能希望使用新的标准化实现，而不是旧版本。
@Moses...啊。明白了。所以常规的::selection 应该作为默认的标准样式放在最后？

【解决方案3】：

试试这个

::selection
{
background:#999;
color:#fff;
}

【讨论】：