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

原文 标签 css css-selectors pseudo-element

这个问题在这里已经有了答案:





Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?

(2 个回答)


3年前关闭。




当组合伪元素选择器(用于范围输入)时,我看到没有应用样式。这迫使我分离我的选择器并复制我的 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例子。

Screenshot

最佳答案

您正在将多个特定于供应商的选择器组合到一个 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 - 为什么我不能组合伪元素选择器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50580986/

相关文章:

css - 如何修改以适合所有浏览器?

css - CSS,将鼠标悬停在特定元素上时更改其他元素的背景?

javascript - 将 anchor 链接添加到 Div 及其伪元素(CSS 或 Javascript/jQuery)

css - :before 等 css 伪元素

html - Bootstrap 4 Grid系统出现问题

html - CSS - 无限动画(向右移动加载渐变)闪烁

html - 选择分配给特定列的

css - 如何在 SCSS 中使用 Mixin 覆盖引用父选择器

html - 如何将多行文本与为 :before 设置的背景图像垂直对齐

css - 媒体查询文字对齐方式:居中