我发现了一个我正在尝试使用的SCSS片段。
它包含我不熟悉的 CSS 供应商前缀：
::-webkit-slider-runnable-track::-webkit-slider-thumb::-moz-range-track::-ms-fill-lower- 等
我很想使用 Chrome 或其他浏览器的"开发人员工具"/检查来调整颜色和尺寸，但我找不到这些特定的 CSS 规则在哪里。
我能找到的只是我的input元素：<input type="range" id="position" name="position" min="0" step=".1" max="70" value="70">
目前，我正在 Netbeans 中编辑 SCSS，每次保存时它都会编译为 CSS，然后刷新浏览器。
这很耗时，而且我也非常想看看当我在检查器中突出显示某个元素时，这些规则会在哪里生效。
我感谢任何建议。
附言我想会有一种方法来展示它们，就像active、focus、hover和visited规则一样。
供应商前缀实际上被认为是伪选择器，因此，创建自己的CSS选择器。您不会在 CSS 状态(如:hover和:active(中看到它们，而是作为独立的 CSS规则：
input[type='range']::-webkit-slider-runnable-track
input[type='range']::-webkit-slider-runnable-thumb
input[type='range']::-moz-range-track
input[type='range']::-ms-fill-lower
下面的示例对此进行了说明，该示例在不同的浏览器上具有不同的显示：
input[type='range'] {
width: 210px;
height: 30px;
overflow: hidden;
cursor: pointer;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 200px;
height: 10px;
background: #AAA;
}
input[type='range']::-webkit-slider-thumb {
position: relative;
height: 30px;
width: 30px;
margin-top: -10px;
background: steelblue;
border-radius: 50%;
border: 2px solid white;
}<div class="container">
<input type="range" id="position" name="position" min="0" step=".1" max="70" value="70">
</div>希望这有帮助！ :)
我终于可以在Chrome Dev Tools上找到一个选项来显示用户添加伪元素。
基本上，您必须转到"首选项"并滚动到"元素"部分，其中有一个选项。
Webkit 伪元素文档