css - 如何在浏览器中检查 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>

希望对您有所帮助! :)