使用jQuery设置文本选择颜色。演示不起作用。

Question

http://jsfiddle.net/uKdPM/

我在CSS中设置了::selection的颜色，所以当你在屏幕上选中文本时，文本的颜色是粉色的。现在我正在尝试在页面加载时通过jQuery覆盖该颜色。看起来应该非常简单。但对我来说并不起作用。

- android.nick

---

这不会发生，因为jQuery找不到p :: selection，你可以捕获p本身，但我不确定如何实际应用样式到伪元素。 - Jan Dragsbaek

不太相关于问题，但我相信 ::selection 已经从 CSS3 规范中移除，因此请谨慎使用。 - James Allardice

可能是用JS更改文本选择高亮显示的重复问题。 - thirtydot

Answer 1

我认为，如果您想实现这种效果，需要基于CSS类来应用颜色变化。我fork了你的jsfiddle，这里是结果。

虽然我认为你的问题很有趣，但我很难想象它在实际应用中的作用。您想要实时更改主题吗？

- Jan Dragsbaek

---

我的使用情况：我正在考虑为我正在构建的网站上的每个“文章”设置不同的颜色强调。它们更像书籍而不是文章，长度更长，所以我正在考虑这种可能性。我仍然不确定是否要这样做。 - android.nick

老实说，我不建议你这样做，我认为这是一种俗气的效果，很容易让人感到烦恼。 - Jan Dragsbaek

Answer 2

根据这个 问题，你无法更改选择文本的高亮颜色，因为没有用于操作伪类的DOM接口。你可以更改元素的类来实现相同的效果。

- kgiannakakis

Answer 3

我曾经遇到过同样的问题，后来偶然看到了这个问题。解决方法就是在文档主体中添加一个带有CSS属性的<style>标签。

$('<style> p::selection{ background-color:#000; } p::-moz-selection{ background-color:#000; }</style>').insertAfter('body *:last');

这可能不是最优雅的方法，但至少它能够起作用。

- Mike Burnwood

Answer 4

::selection 是 CSS 伪类，不是 jQuery 选择器！

你不能这样做 $('p::selection').css({color: "#3c3"}) 并期望改变文本选择的颜色。

---

• $(<selector>) 允许您以灵活的方式使用ID、CSS类、属性等来选择DOM元素。

• :hover、:after... ::selection是CSS伪选择器，允许您样式化元素。

尽管jQuery选择器的语法看起来与伪类CSS相同，但它们是不同的。

---

顺便提一下，无法通过编程方式更改css伪类的样式（例如:hover...）。

- Didier Ghys

---

事实上，你可以做到这一点并期望更改文本选择颜色... 虽然它不起作用，但我肯定做到了，并期望着它... 只是让你知道。 - android.nick

Answer 5

如果您可以使用类来替代直接从JavaScript设置颜色，那么请这样做，因为这样会更简单。

否则，请参考此问题：从JavaScript设置CSS伪类规则 使用此答案中提供的库：

jss('p::selection', {
    color: '#3c3'
});

http://jsfiddle.net/thirtydot/uKdPM/9/

- thirtydot