在Bootstrap 3中用鼠标选择（突出显示）文本样式

Question

我正在尝试使用Bootstrap 3 template并更改突出显示的文字的外观。

默认情况下，使用鼠标选择单词时，它为蓝色，背景为白色。我想只将蓝色改为红色，但是当我使用下面的css时，它会覆盖整个样式：

::-moz-selection { /* Code for Firefox */
    color: rgba(217,83,79,0.50);
 }

 ::selection {
    color: rgba(217,83,79,0.50);
 }

以下是一个例子：

我搜索了bootstrap和模板的CSS文件，但我找不到任何样式。我在寻找::selection。我怎么能找到它？

Answer 1

您应指定所选文字的color和background。

  

警告：::selection的浏览器实施未标准化，spec for css 4尚未获得批准。也就是说，根据caniuse ::selection，浏览器支持看起来相当不错。

以下是在多个浏览器中运行的代码示例。请注意，默认情况下，FF和IE将根据背景颜色选择主题，以使其更加明显，而chrome则不会。 Chrome还可以防止任何真正的白色选择背景与黑暗的主题背景。

这里是Stack Snippets中的Demo

＆＃13;

＆＃13;

.dark  { color: #fff; background-color: #333;}
.light { color: #333; background-color: #fff;}

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

＆＃13;

<div class="dark" >Dark-Themed </div>
<div class="light">Light-Themed</div>

＆＃13;

＆＃13;

＆＃13;

Here's a Demo in jsFiddle

有关详细信息，请阅读MDN on the ::selection psuedo-element或this article on CSS-Tricks