::selection 和 ::-moz-selection 的多个规则（以及用户选择？）答案

【问题标题】：Multiple rules for ::selection and ::-moz-selection (and user-select?)::selection 和 ::-moz-selection 的多个规则（以及用户选择？）
【发布时间】：2013-10-14 06:01:05
【问题描述】：

我有网站，我第一次设置的地方

::selection
{
    background: transparent;
}
::-moz-selection
{
    background: transparent;
}
*
{
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none;
    user-select: none;
 }

（只是为了艺术效果，不是因为我试图阻止人们复制某些东西。）

但是，稍后，我希望用户能够从文本区域中选择文本..
我能够使选择再次可见，

#commentarea::selection
{
    background: #070707;
}
#commentarea::-moz-selection
{
    background: #070707;
}
#commentarea
{
    -moz-user-select: element; 
    -khtml-user-select: element; 
    -webkit-user-select: element; 
    -o-user-select: element;
    user-select: element;
}

但是如果用户从 textarea 中选择了某些内容，则无法通过单击某处来取消选择。您只能通过移动插入符号（使用箭头键）来取消选择文本。

这是为什么呢？我该如何防止这种情况发生？

【问题讨论】：

我只能在 Firefox (13) 中复制它，而且我只能通过移动插入符号（Shift + 箭头）来选择文本。在这种情况下，我必须移动插入符号来取消选择它几乎是有道理的。
在 CSS 中结合两个实验性和 非常破 的实现要非常小心...

标签： css selection

【解决方案1】：

Enve 的回答是正确的.. 对于 Firefox 以外的浏览器（至少 13.0）。

致有同样问题的人：

在通用选择器（*）中，您必须使用-moz-user-select: -moz-none;，而不是-moz-user-select: none;。这将解决问题。

【讨论】：

哈。好像你在我做的时候找到了解决方案。 :)

【解决方案2】：

改变

#commentarea
{
    -moz-user-select: element; 
    -khtml-user-select: element; 
    -webkit-user-select: element; 
    -o-user-select: element;
    user-select: element;
}

到

#commentarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -khtml-user-select: text;
    -webkit-user-select: text;
    -o-user-select: text;
}

演示：http://jsfiddle.net/dWjPQ/1/

【讨论】：

在 google chrome 和 Internet Explorer 中有效，它仅在 Mozilla 中无效
对于 Firefox，更改 * { -moz-user-select: none; } to * { -moz-user-select: -moz-none; }
-o-user-select 什么都不做：Opera 没有实现它。此外，-ms-user-select 现在适用于 IE 10，因此您可能需要添加它。