4

组合伪元素选择器（用于范围输入）时，我看到未应用样式。这迫使我分离我的选择器并复制我的 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;
}

代码笔示例。

截屏

4

2 回答 2

6

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

这意味着如果浏览器无法识别其中一个选择器，则会忽略整个 CSS 块。在这种特殊情况下，Chrome 无法识别::-moz-range-track，因为它是 Firefox/Gecko 特有的。这不是一个怪癖，而是预期的行为和CSS 标准的一部分。

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

.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;
}

更新了 CodePen

于 2018-05-29T10:00:28.107 回答
0

我认为用户代理无法识别伪元素选择器，因为它应该以{此处开头，在您的情况下，您正在组合多个选择器，因此它不适用于某些/所有浏览器。

选择器总是与 {} 块一起使用。当用户代理无法解析选择器时（即，它不是有效的 CSS3），它也必须忽略 {} 块。

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

选择器包含（但不包括）第一个左花括号 ({) 之前的所有内容。选择器总是与声明块一起使用。当用户代理无法解析选择器（即，它不是有效的 CSS 2.1）时，它也必须忽略选择器和以下声明块（如果有）。

于 2018-05-29T09:49:21.777 回答