Question

我想更改滑块的Thumb颜色，但我需要选择带有'.topcoat-range-input :: - webkit-slider-thumb'的拇指。这个选择器不能用于css，我认为因为它包含供应商前缀。有可能解决这个问题吗？我想动态选择颜色，所以我不能简单地附加一个类。

$('.button').on('click', function (e) {
    $('.topcoat-range-input::-webkit-slider-thumb').css('background', 'rgba(255, 208, 255, 0.75)');
});

http://jsfiddle.net/qcn6tmpz/3/

可能的解决方案就是这个，但我希望以简单的方式做到这一点：

$('.button').on('click', function (e) {
    $("<style type='text/css'>.topcoat-range-input::-webkit-slider-thumb{background:rgba(255, 208, 255, 0.75)}</style>").appendTo($("head"));
});

Answer 1

您可以在点击时应用该类，并为选择器定义CSS规则。这里更新了小提琴。 http://jsfiddle.net/qcn6tmpz/9/

$('.button').on('click', function (e) {
    $('.topcoat-range-input').addClass('applied');
});


.topcoat-range-input.applied::-webkit-slider-thumb {
    background : rgba(255, 208, 255, 0.75);
}

Answer 2

对于FYI：你不能按照你想要的方式去做 vishvanath这样做的方式是你能做到的唯一最佳方式。

原因： '::'＆lt; - jquery selectore解析器不接受这个，所以即使你反斜杠就像

$（'。topcoat-range-input //：//： - webkit-slider-thumb'）。css（'background'，'rgba（255,208,255,0.75）'）;

仍然无法工作，因为根据w3指南： “样式表预处理器不能从样式表中删除这些反斜杠，因为这会改变样式表的含义。”

针对您动态选择颜色的问题使用Less css然后在vishwanath的ass类函数中传递颜色

是否可以使用jquery选择包含供应商前缀的属性？

2 个答案: