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

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

1 个答案: