为什么我不能组合伪元素选择器？ [复制]答案

【问题标题】：Why can't I combine pseudo-element selectors? [duplicate]为什么我不能组合伪元素选择器？ [复制]
【发布时间】：2018-11-07 21:50:36
【问题描述】：

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

【问题讨论】：

标签： css css-selectors pseudo-element

【解决方案1】：

您正在将多个特定于供应商的选择器组合成一个 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

【讨论】：

嗯，规范声明“如果选择器中的任何地方出现错误，则应忽略整个语句，即使选择器的其余部分在 CSS 2.1 中看起来很合理。”选择器本身是完全有效的。毕竟它不包含任何麻烦的字符。
虽然选择器不包含奇怪的字符并且是一个有效的、有效的（在 Firefox 中）选择器。 Chrome 无法识别它并将其标记为无效，从而忽略整个 CSS 规则。或者，Firefox 无法识别 -webkit- 选择器，因此也将整个规则标记为无效。在这种情况下，不允许浏览器“挑选获胜者”并将样式应用于其特定实现。
@oodavid：对于规范的该部分，供应商特定的功能应该被视为无效，因为它们毕竟是非标准的。我只是将您的问题与我回答的问题联系起来，其中我声明“在实践中，无论规范说‘它不是有效的 CSS’或类似的意思，它都应该被理解为‘它不被用户代理'。” （我刚刚编辑了我的答案，所以这句话是从旧的改写的，但本质是一样的。）
我明白了，真的很遗憾，因为 characters 是有效的。无效状态是由于未能匹配定义的白名单。至于“抽奖”，肯定和.exists-in-dom, .doesnt-exist-in-dom没什么区别吧？
哎呀@BoltClock，我没有在网站上找到你的答案，我很高兴这个答案与你的相似:) oodavid，看看this answer 以了解为什么 发生这种行为。

【解决方案2】：

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

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

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

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

【讨论】：