5

我非常喜欢使用::selection和::-moz-selection美化网站 - 我讨厌默认的蓝色和白色！

然而，我发现一件小事让我很烦恼：我不能把::selectionand::-moz-selection放在同一个 CSS 规则中，就像这样：

::selection, ::-moz-selection {
    background:#8A1920;
    color:#FFFF;
}

jsFiddle 链接

我觉得这很烦人，因为这意味着如果我想更改背景颜色（或其他选择样式），我必须编辑两个单独的规则。它也违反了我几乎虔诚地遵循的政策：DRY（不要重复自己）。

我在 Chrome 28、Chrome Canary 30、Firefox 22、Firefox 23、IE 9 和 IE 10 中对此进行了测试，它们都产生了相同的结果。这里出了什么问题？

如果他们必须保持分开，有没有办法让他们进一步加入？就像是：

.selected {
    background:#8A1920;
    color:#FFF;
}

::selection {
    @copy-from(.selected); /* I know this line is completely made up */
}

::-moz-selection {
    @copy-from(.selected);
}

会非常有用。

4

1 回答 1

5

这是来自文档：

Gecko 是唯一需要前缀的引擎。由于 CSS 解析规则需要在遇到无效伪元素时删除整个规则，因此必须编写两个单独的规则：::-moz-selection, ::selection {...}。该规则将在非 Gecko 浏览器上被删除，因为 ::-moz-selection 对它们无效。

https://developer.mozilla.org/en-US/docs/Web/CSS/::selection

于 2013-08-07T22:02:18.153 回答