Webkit正在阻止我在scs中添加classNames

Question

这很有效：

.slider {
-webkit-appearance: none;
appearance: none;
width: 1.4rem;
height: 1.4rem;
border-radius: 50%;
background: $havenAccent;
cursor: pointer;
&.--disabled {
background: gray;
}
}

这不起作用：

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 1.4rem;
height: 1.4rem;
border-radius: 50%;
background: $havenAccent;
cursor: pointer;
&.--disabled {
background: gray;
}
}

当我在两个例子中滚动到"--disabled"时，我会显示".looper-disabled"。我希望能够更改具有".滑块：：-webkit滑块拇指"的示例的背景颜色

Answer 1

如何使用：

.slider { 
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 1.4rem;
height: 1.4rem;
border-radius: 50%;
background: $havenAccent;
cursor: pointer;
}

&.--disabled::-webkit-slider-thumb {
background: gray;
}
}

我将.slider类向上移动了一个级别，以便::-webkit-slider-thumb伪元素和类.---disabled都可以使用它，并且作为::-webkit-slider-thumb，它必须重复。

这将输出以下css：

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 1.4rem;
height: 1.4rem;
border-radius: 50%;
background: #someColor;
cursor: pointer;
}
.slider.--disabled::-webkit-slider-thumb {
background: gray;
}