如何在浏览器中检查 CSS 供应商前缀？

Question

我找到了我正在尝试使用的snippet of SCSS。

它包含我不熟悉的 CSS 供应商前缀：

• ::-webkit-slider-runnable-track
• ::-webkit-slider-thumb
• ::-moz-range-track
• ::-ms-fill-lower
• 等

我很想使用 Chrome 或其他一些浏览器的“开发者工具”/Inspect 来处理颜色和尺寸，但是我找不到这些特定的 CSS 规则在哪里。

我只能找到我的input 元素：<input type="range" id="position" name="position" min="0" step=".1" max="70" value="70">

目前，我正在 Netbeans 中编辑 SCSS，每次保存时它都会编译为 CSS，然后我刷新浏览器。

这很耗时，而且我也很想看看当我在检查器中突出显示某个元素时这些规则会在哪里产生影响。

感谢任何建议。

附：我想会有一种方法来展示它们，就像 active、focus、hover 和 visited 规则一样。

Answer 1

供应商前缀实际上被视为伪选择器，因此，创建自己的 CSS 选择器。您不会在 :hover 和 :active 等 CSS 状态中看到它们，而是作为独立的 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>

希望这会有所帮助！ :)