Firefox ::-moz-selection 选择器错误(?)有解决方法吗? [英] Firefox ::-moz-selection selector bug(?) is there a workaround?

问题描述

我正在开发一个拥有大量颜色样式的网站，大约有 250 行 CSS 来定义 7 种配色方案中的一种，因此尽可能将各种颜色规则分组很重要.

I'm working on a site that has a large number of color styles, around 250 lines of CSS to define one of 7 color schemes, so it's important that I keep the various color rules grouped as best I can.

当我尝试堆叠与已弃用的 CSS3 ::selection 伪元素相关的选择器时，Firefox 4 的最新 RC 表现不佳.

The newest RC of Firefox 4 is behaving badly when I try and stack selectors relating to the deprecated CSS3 ::selection pseudo element.

这有效:

.green ::-moz-selection {
    /* 'Pure Hue' Color */
    background-color: #62BA21;
    color: white;
}

但是一旦我尝试与 webkit 的选择器共享规则，它就会中断.

But once I try and share the rule with the selector for webkit it breaks.

不适用于 FireFox:

Does not work for FireFox:

.green ::selection, .green ::-moz-selection {
    /* 'Pure Hue' Color */
    background-color: #62BA21;
    color: white;
}

我知道他们可能不会解决这个错误，因为 ::selection 不再出现在工作草案中，但我更喜欢如果我不必使我的 CSS 膨胀超过它已经是为了这个怪癖.

I understand they might not be addressing the bug since ::selection is no longer present in the working draft, but I'd prefer if I didn't have to bloat my CSS any more than it already is for this quirk.

推荐答案

Firefox 似乎根本不理解 ::selection(因此需要供应商前缀的 ::-moz-selection)，因此它会忽略遇到无法识别的选择器的整个规则 per规范.

Firefox appears to simply not understand ::selection (hence necessitating the vendor-prefixed ::-moz-selection), so it ignores the entire rule on encountering an unrecognized selector per the spec.

对于不理解组中的一个或多个选择器的浏览器的常见解决方法是拆分/复制规则集:

The common workaround for a browser not understanding one or more selectors in a group is to split/duplicate the rule set:

/* Firefox sees this */
.green ::-moz-selection {
    background-color: #62BA21;
    color: white;
}

/* Other browsers see this */
.green ::selection {
    background-color: #62BA21;
    color: white;
}

事实上，在这种情况下，这是您唯一可以做的事情，即您将不得不忍受这种轻微的膨胀.

In fact, in this case it's the only thing you can do, i.e. you will have to put up with this slight bit of bloat.

jsFiddle 演示

这篇关于Firefox ::-moz-selection 选择器错误(?)有解决方法吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！