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),因此它忽略了根据规范遇到无法识别的选择器的整个规则.

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

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

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

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

jsFiddle演示