CSS伪元素[非标准]不能与Chrome组合，而Firefox可以毫无问题地接受它们，这是有原因的吗

Question

案例示例

不适用于Chrome，适用于Firefox

#my-slider {
  width              : 400px;
  margin             : 1em;
  -webkit-appearance : none;
  height             : 8px;
  border-radius      : 4px;
  background-color   : teal;
  }
#my-slider::-webkit-slider-thumb,
#my-slider::-moz-range-thumb {
  -webkit-appearance : none;
  -moz-appearance    : none;
  width              : 30px;
  height             : 30px;
  border-radius      : 15px;
  border             : none;
  background-color   : orange;
  overflow           : visible;
  cursor             : pointer;
  }

<input type="range" min="0" max="100" value="50" id="my-slider">

对两个都很好

#my-slider {
  width              : 400px;
  margin             : 1em;
  -webkit-appearance : none;
  height             : 8px;
  border-radius      : 4px;
  background-color   : teal;
  }
#my-slider::-webkit-slider-thumb {
  -webkit-appearance : none;
  width              : 30px;
  height             : 30px;
  border-radius      : 15px;
  border             : none;
  background-color   : orange;
  overflow           : visible;
  cursor             : pointer;
  }
#my-slider::-moz-range-thumb {
  -moz-appearance    : none;
  width              : 30px;
  height             : 30px;
  border-radius      : 15px;
  border             : none;
  background-color   : orange;
  overflow           : visible;
  cursor             : pointer;
  }

<input type="range" min="0" max="100" value="50" id="my-slider">

或者是"；只是一辆Bugg">

Answer 1

这是一种CSS边缘情况(可能不是所有浏览器都存在(，当Chrome浏览器无法解码/识别第一个选择器时(因此将其视为无效(，它的响应是忽略整个规则，包括其他选择器(即使它们有效(，更具体地说它停止解析，甚至不检查它们是否有效。

IE上也存在同样的行为，所以从技术上讲，它并不是一个真正的bug。

因此，当您想要处理非标准的伪元素时，您的第二个代码片段是可行的。