为什么我不能组合伪元素选择器？

Question

当组合伪元素选择器（用于范围输入）时，我发现没有应用样式。这迫使我分开我的选择器并复制我的 CSS.

有谁知道为什么会出现这种怪癖？

/* Keeping the selectors separate works */
.range1 {
  -webkit-appearance: none;
    -moz-appearance: none;
          appearance: none;
}
.range1::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  border: 1px solid black;
}
.range1::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  border: 1px solid black;
}

/* Combining the selectors fails */
.range2 {
  -webkit-appearance: none;
    -moz-appearance: none;
          appearance: none;
}
.range2::-webkit-slider-runnable-track,
.range2::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  border: 1px solid black;
}

CodePen 示例。

Answer 1

我认为用户代理不识别伪元素选择器，因为它应该以 { 开头，在您的情况下，您组合了多个选择器，因此它不适用于 some/all 浏览器.

A selector always goes together with a {}-block. When a user agent can't parse the selector (i.e., it is not valid CSS3), it must ignore the {}-block as well.

https://www.w3.org/TR/CSS21/syndata.html#rule-sets

The selector consists of everything up to (but not including) the first left curly brace ({). A selector always goes together with a declaration block. When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.

Answer 2

您正在将多个特定于供应商的选择器合并到一个 CSS 规则中。

这意味着如果浏览器无法识别一个选择器，则忽略整个 CSS 块。在这种特殊情况下，Chrome 无法识别 ::-moz-range-track，因为它特定于 Firefox/Gecko。这不是怪癖，而是预期的行为和 part of the CSS standard.

解决方案是拆分声明。像这样：

.range2::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    border: 1px solid black;
}
.range2::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    border: 1px solid black;
}

Updated CodePen

为什么我不能组合伪元素选择器？

Why can't I combine pseudo-element selectors?

css

css-selectors

pseudo-element