Firefox ::-moz-selection 选择器错误（？）有解决方法吗？

Question

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

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

这行得通：

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

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

不适用于 FireFox：

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

我知道他们可能没有解决这个错误，因为 ::selection 不再出现在工作草案中，但我希望我不必为了这个怪癖而让我的 CSS 变得臃肿。

Answer 1

Firefox 似乎根本无法理解::selection（因此需要以供应商为前缀的::-moz-selection），因此它会忽略遇到无法识别的选择器per the spec 的整个规则。

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

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

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

事实上，在这种情况下，这是你唯一能做的事情，也就是说，你将不得不忍受这种轻微的膨胀。

jsFiddle demo