我正在一个拥有大量颜色样式的网站上工作,大约250行CSS定义了7种配色方案之一,因此,务必将各种颜色规则尽可能地分组,这一点很重要。
当我尝试堆叠与已弃用的CSS3 ::selection伪元素相关的选择器时,Firefox 4的最新RC表现不佳。
::selection
这有效:
.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。
Firefox似乎根本不了解::selection(因此必须由供应商提供前缀::-moz-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; }
实际上,在这种情况下,这是您唯一可以做的事情,即您将不得不忍受这一点点膨胀。