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

Question

我发现一个包含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 规则一样。

- Ryan

---

你找到答案了吗？如果是这样，如果您能与我们分享，那将非常好。我在这里有一个类似的问题：https://dev59.com/_MPra4cB1Zd3GeqPlq1O - guilfer

很遗憾，不行。 - Ryan

Answer 1

供应商前缀实际上被视为伪选择器，因此它们创建自己的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>

希望这能帮到你！ :)

- Obsidian Age

---

我很感激你的回答并给了你一票，但这让我感到困惑：当我在Chrome上点击你的答案中的“运行代码片段”，然后右键单击输入范围并选择“检查”，我立即在开发者工具的“样式”选项卡中看到了我希望看到的内容。但是在我的自己的网站上（即我的类似实现），当我进行相同的检查时，我看不到任何伪选择器（尽管它们的样式成功地工作）。奇怪。 - Ryan

我也遇到了这个问题。当我检查我的应用程序时，无法查看伪选择器，但是我可以在这个答案中看到这个伪选择器... - Zalo

我想我懂他的诀窍了！他不仅添加了伪选择器，还为这个样式规则添加了input[type='range]选择器（没有伪选择器），这在开发工具中是可见的：input[type='range'], input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb { } - Benno

Answer 2

我终于在Chrome Dev Tools上找到了一个选项，可以显示用户代理伪元素。

基本上，您需要进入“首选项”并滚动到“元素”部分，那里有一个选项。

Webkit Pseudo Elements Documentation

- guilfer