问题 如何禁用文本选择突出显示？

在大多数浏览器中，这可以使用CSS上的专有变体来实现 user-select 属性， 最初提出然后放弃在CSS3中 现在提出来了 CSS UI级别4：

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

对于IE <10和Opera <15，您将需要使用 unselectable 您希望不可选择的元素的属性。您可以使用HTML中的属性来设置它：

<div id="foo" unselectable="on" class="unselectable">...</div>

遗憾的是，这个属性不是继承的，这意味着你必须在一个内部的每个元素的开始标记中放置一个属性 <div>。如果这是一个问题，您可以使用JavaScript以递归方式为元素的后代执行此操作：

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

2014年4月30日更新：只要向树中添加新元素，就需要重新运行这个树遍历，但是@Han的注释似乎可以避免这种情况。 添加一个 mousedown 设置的事件处理程序 unselectable 关于事件的目标。看到 http://jsbin.com/yagekiji/1 详情。

这仍然没有涵盖所有可能性。虽然不可能在不可选择的元素中启动选择，但在某些浏览器（例如IE和Firefox）中，仍然无法阻止在不可选元素之前和之后开始的选择而不会使整个文档无法选择。

IE的JavaScript解决方案是

onselectstart="return false;"

直到CSS 3 用户选择 物业变得可用， 壁虎基于浏览器的支持 -moz-user-select 你已经找到的财产​​。 WebKit的 和基于Blink的浏览器支持 -webkit-user-select 属性。

当然，在不使用Gecko渲染引擎的浏览器中不支持这一点。

没有符合“标准”的快速简便方法;使用JavaScript是一种选择。

真正的问题是，为什么您希望用户无法突出显示并可能复制和粘贴某些元素？我没有遇到过一次我不想让用户突出显示我网站的某个部分。我的几个朋友在花了很多时间阅读和编写代码之后，会使用突出显示功能来记住他们在页面上的位置，或者提供一个标记，以便他们的眼睛知道下一步要看哪里。

我唯一能看到它有用的地方是，如果用户复制并粘贴网站，则表格的按钮不应复制和粘贴。

如果要禁用除on之外的所有内容的文本选择 <p> 元素，你可以在CSS中做到这一点（注意 -moz-none 允许在子元素中覆盖，这在其他浏览器中是允许的 none）：

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

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

在上面的解决方案中，选择停止，但用户仍然认为您可以选择文本，因为光标仍然会改变。要保持静态，您必须设置CSS光标：

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

这将使您的文本完全平坦，就像在桌面应用程序中一样。

你可以在Firefox和Safari中这样做（Chrome也可以？）

::selection { background: transparent; }
::-moz-selection { background: transparent; }

解决方法 WebKit的：

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0,0,0,0);

我在CardFlip示例中找到了它。

我喜欢混合CSS + jQuery解决方案。

使所有元素都在里面 <div class="draggable"></div> 不可选择，使用这个CSS：

.draggable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.draggable input { 
    -webkit-user-select: text; 
    -khtml-user-select: text; 
    -moz-user-select: text; 
    -o-user-select: text; 
    user-select: text; 
 }

然后，如果您正在使用jQuery，请将其添加到内部 $(document).ready() 块：

if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

我想你仍然希望任何输入元素可以互动，因此 :not() 伪选择。你可以用 '*' 相反，如果你不在乎。

警告：IE9可能不需要这个额外的jQuery片段，所以你可能想在那里添加一个版本检查。

.hidden:after {
    content: attr(data-txt);
}

<p class="hidden" data-txt="Some text you don't want to be selected"></p>

不过，这不是最好的方式。