Html 如何使用CSS定位单个范围滑块

我有几个范围滑块，希望每个滑块上的“runnable track”有不同的颜色。我给了每个滑块一个单独的类（在本例中是SepiSlider，但无法在网上找到指向该类的语法参考）

我所能想到的就是

<input class="sliders sepiaSlider sepiaSliderID7643108" type="range" name="amountRange" min="0" max="100" value="0" step="1" oninput="this.form.amountInput.value=this.value">


<style>
.sepiaSlider input[type=range]::-webkit-slider-runnable-track {
    //styles
 }
</style>

相反？

一个想法是使用它来控制所需的值，而不必重复滑块的CSS

以下是我更改背景颜色的示例：

：：-webkit滑块可运行轨迹{
宽度：100%；
高度：8.4px；
光标：指针；
盒影：1px 1px 1px#000000，0px 0px 1px#0d0d；
背景：var（--c，黄色）；
边界半径：1.3倍；
边框：0.2px实心#010101；
}
.type1{
--c:红色；
}
.类型2{
--c:蓝色；
}

关于如何使用CSS选择元素的问题要求您向我们展示（相关）代码；否则我们只能猜测。无论是好是坏。关于您的具体问题：“[能否]我可以通过包装来确定它的目标…”。。。"那么是的，你当然可以。这是“最好的”、最简单的、最可靠的还是唯一的方法？没有你的代码，谁知道呢。谢谢你的建议，我一直不擅长提问，这是我正在做的事情。我已经更新了问题。你不小心删除了你的大部分问题。请正确地执行你想要的任何编辑操作ted申请。哦，哇，你有没有提到过“-c”类型的语法，因为我以前从未见过。谢谢！@Marley yes这里是：

.sepiaSlider > input{}