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

<分区>

当组合伪元素选择器(用于范围输入)时，我发现没有应用样式。这迫使我分离我的选择器并复制我的 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 block 将被忽略。在这种特殊情况下，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 - 为什么我不能组合伪元素选择器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50580986/

上一篇：css - 我可以在 SASS [语法] 中打破跨多行的属性声明吗？

下一篇：css - 按字母顺序排序 CSS 属性是否会给 GZIP 和 brotli 压缩带来任何好处？

html - CSS 样式 :before position? 额外空间

javascript - Bootstrap 边栏菜单和边栏导航

html - 语义 UI 中心对齐登录框？

html - 在文本框中输入值时使用 CSS 更改文本框中的字体颜色

CSS "#id1 #id2"选择器，为什么它与只有 "#id2"不同？

html - CSS:具有灵活水平空间的文本右对齐部分

java - 什么是正确的 CSS 选择器来获得我需要的东西？

html - 在 :after pseudo element with css 添加弹出窗口

html - 使用 :after property in css 后链接消失