css删除选择/突出显示文本上的文字阴影(mozilla)

Question

我在大多数文本网站范围内使用文本阴影,但是当您突出显示/选择文本时 - 文本看起来很模糊.所以为了删除文本阴影我从这里使用这个css .

::-moz-selection,
::-webkit-selection,
::selection {
    text-shadow: none;
    background: #333;
    color: #fff;
}

问题是,由于某些原因moz-selection,在mozilla(Firefox)中似乎不再起作用(不再？).

这是jsFiddle

Answer 1

看起来这个问题是由于将多个css规则(针对供应商特定的css)与:: selection伪元素结合在一起.

我原本以为在单独的一行上写每个语句就足够了.

我误解了.

所以如果我替换这段代码:

::-moz-selection,
::selection {
    text-shadow: none;
    background: #333;
    color: #fff;
}

..使用以下代码:

::-moz-selection
{
    text-shadow: none;
    background: #333;
    color: #fff;
}
::selection {
    text-shadow: none;
    background: #333;
    color: #fff;
}

....宾果,它的工作原理.

小提琴

支持也非常好(适用于桌面):Caniuse

此外,如果您使用LESS或SASS - 您可以轻松编写mixin来绕过重复.

Answer 2

Mozilla Developer Network上记录了以下内容:

尽管这个伪元素在CSS选择器级别3的草稿中,但它在候选推荐阶段被删除了,因为它的行为似乎不明确,特别是对于嵌套元素,并且没有实现互操作性(基于讨论) W3C Style邮件列表).

:: selection伪元素当前不在标准轨道上的任何CSS模块中.它不应该在生产环境中使用.