Question

我找到了snippet of SCSS，我试图使用它。

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

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

我喜欢使用Chrome或其他一些浏览器的开发者工具＆＃34; /检查能够使用颜色和尺寸，但我无法找到这些特定CSS规则的位置。

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

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

这非常耗时，而且当我在检查器中突出显示某个元素时，我也非常希望看到这些规则在哪里生效。

我感谢任何建议。

P.S。我认为可以通过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>

希望这有帮助！：）

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

1 个答案: