在 CSS 3 的 user-select 属性可用之前，基于 Gecko 的浏览器会支持您已经找到的属性。WebKit 和基于 Blink 的浏览器支持该属性。-moz-user-select-webkit-user-select

当然，在不使用 Gecko 渲染引擎的浏览器中不支持此功能。

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

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

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

除了仅限 Mozilla 的属性之外，不，没有办法仅使用标准 CSS 禁用文本选择（截至目前）。

如果您注意到，Stack Overflow 不会禁用其导航按钮的文本选择，我建议在大多数情况下不要这样做，因为它会修改正常的选择行为并使其与用户的期望相冲突。

您可以在 Firefox 和 Safari 中执行此操作（Chrome 也是如此？

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

Internet Explorer 的 JavaScript 解决方案是：

onselectstart="return false;"

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

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

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

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

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

遗憾的是，这个属性不是继承的，这意味着你必须在 .如果这是一个问题，你可以改用 JavaScript 对元素的后代递归执行此操作：<div>

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 的评论来看，可以通过添加设置事件目标的事件处理程序来避免这种情况。有关详细信息，请参阅 http://jsbin.com/yagekiji/1。mousedownunselectable

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

2017 年 1 月更新：

根据 Can I use，Safari 的 + -webkit-user-select 足以在所有主流浏览器中实现所需的行为。user-select

这些都是可用的正确 CSS 变体：

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

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

请注意，它正处于标准化过程中（目前处于 W3C 工作草案中）。它不能保证在任何地方都能工作，并且浏览器之间的实现可能存在差异。此外，浏览器将来可能会放弃对它的支持。user-select

更多信息可以在 Mozilla Developer Network 文档中找到。

此属性的值为 、 、 、 和 。nonetexttoggleelementelementsallinherit

如果你想禁用除元素以外的所有内容的文本选择，你可以在CSS中执行此操作（注意允许在子元素中覆盖，这在其他浏览器中是允许的）：<p>-moz-nonenone

* {
    -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;
}

WebKit 的解决方法：

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

我在 CardFlip 示例中找到了它。

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

要使里面的所有元素都不可选择，请使用以下 CSS：<div class="draggable"></div>

.draggable {
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-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()'*'

注意：Internet Explorer 9 可能不需要这个额外的 jQuery 部分，因此您可能希望在其中添加版本检查。

如果你使用的是 Less 和 Bootstrap，你可以这样写：

.user-select(none);

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

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

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

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.unselectable = true;
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

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

-webkit-user-select: none;
-moz-user-select: none;

onselectstart="return false;"

::selection { 
    background: transparent; 
}

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

* {
    -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;
}

<div class="draggable"></div>

.draggable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-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;
 }

if ($.browser.msie)
    $('.draggable').find(':not(input)').attr('unselectable', 'on');

将此添加到要禁用文本选择的第一个 div 中：

onmousedown='return false;' 
onselectstart='return false;'

如果也不需要颜色选择，这将很有用：

::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }

...所有其他浏览器修复。它将在 Internet Explorer 9 或更高版本中工作。

这不是CSS，但值得一提的是：

jQuery UI禁用选择：

$("your.selector").disableSelection();

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

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

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

此外，对于 Internet Explorer，还需要添加伪类焦点 （.ClassName：focus） 和 .outline-style: none

.ClassName,
.ClassName:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style: none; /* Internet Explorer  */
}

检查我的解决方案没有 JavaScript：

jsFiddle

li:hover {
    background-color: silver;
}
#id1:before {
    content: "File";
}
#id2:before {
    content: "Edit";
}
#id3:before {
    content: "View";
}

<ul>
    <li><a id="id1" href="www.w1.com"></a>
    <li><a id="id2" href="www.w2.com"></a>
    <li><a id="id3" href="www.w3.com"></a>
</ul>

应用了我的技术的弹出菜单：http://jsfiddle.net/y4Lac/2/

虽然这个伪元素出现在 CSS 选择器 Level 3 的草稿中，但它在候选推荐阶段被删除了，因为它的行为似乎没有得到充分说明，尤其是嵌套元素，并且没有实现互操作性。

在 ：：selection 如何在嵌套元素上工作中对此进行了讨论。

尽管它是在浏览器中实现的，但您可以通过在选择时使用与选项卡设计相同的颜色和背景颜色（在您的情况下）来制造未选择文本的错觉。

普通CSS设计

p { color: white;  background: black; }

在选择时

p::-moz-selection { color: white;  background: black; }
p::selection      { color: white;  background: black; }

禁止用户选择文本将引发可用性问题。

这在某些浏览器中有效：

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

只需在选择器前面添加所需的元素/ID，用逗号分隔，不带空格，如下所示：

h1::selection,h2::selection,h3::selection,p::selection{ background-color: transparent;}
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection{ background-color: transparent;}
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection{ background-color: transparent;}

其他答案更好;这可能应该被视为最后的手段/包罗万象。

对于那些在 Android 浏览器中使用触摸事件无法实现相同功能的用户，请使用：

html, body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

注意：

正确答案是正确的，因为它会阻止您选择文本。但是，这并不妨碍您复制文本，正如我将在接下来的几张屏幕截图中显示的那样（截至 2014 年 11 月 7 日）。

正如你所看到的，我们无法选择数字，但我们能够复制它们。

测试在：Ubuntu、Google Chrome 38.0.2125.111。

为了获得我需要的结果，我发现我必须同时使用 ：：selection 和 user-select

input.no-select:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input.no-select::selection {
    background: transparent;
}

input.no-select::-moz-selection {
    background: transparent;
}

在上一个答案的解决方案中，选择已停止，但用户仍认为您可以选择文本，因为光标仍在更改。为了保持静态，你必须设置你的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>

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

尝试使用这个：

::selection {
    background: transparent;
}

如果您希望在特定元素中指定不选择，只需将元素类或 id 放在选择规则之前，例如：

.ClassNAME::selection {
    background: transparent;
}
#IdNAME::selection {
    background: transparent;
}

假设有两个这样的：div

.second {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  -webkit-touch-callout: none;
  /* iOS Safari */
}

<div class="first">
  This is my first div
</div>

<div class="second">
  This is my second div
</div>

将光标设置为默认值，以便给用户一种无法选择的感觉。

需要使用前缀在所有浏览器中支持它。如果没有前缀，这可能不适用于所有答案。

我从CSS-Tricks网站上学到了东西。

user-select: none;

还有：

::selection {
    background-color: transparent;
}

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

::webkit-selection {
    background-color: transparent;
}

这种突出显示效果是由于称为悬停 （onMouseHover） 的操作造成的。

当您将鼠标悬停在任何选项卡上时，其颜色将发生变化。

举个例子，

HTML 代码

<div class="menu">
    <ul class="effect">
        <li>Questions</li>
        <li>JOBS</li>
        <li>Users</li>
    </ul>
</div>

CSS 代码

.effect:hover {
    color: none;
}

如果您想突出显示它，您可以使用任何颜色。否则，您可以使用 .none

尝试将这些行插入到 CSS 中，并在类属性中调用“disHighlight”：

.disHighlight {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -o-user-select: none;
    -moz-user-select: none;
}

您可以使用如下属性...*-user-select

p {
    -webkit-user-select: none;  /* Chrome all and Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* Internet Explorer 10 and later */
    user-select: none;          /* Likely future */
}

详细说明的链接

也许您可以通过以下方式使用此解决方案：:before

nav li {
    display: inline-block;
    position: relative;
}

nav li a {
    display: inline-block;
    padding: 10px 20px;
}

nav li a:hover {
    color: red;
}

nav li.disabled:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

<nav>
    <ul>
    <li><a href="#">Link</a></li>
    <li class="disabled"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    </ul>
</nav>

JsFiddle - https://jsfiddle.net/grinmax_/9L1cckxu/

为此，您可以使用 CSS 或 JavaScript。

旧版浏览器（如旧版本的 Internet Explorer）支持 JavaScript 方式，但如果不是您的情况，请使用 CSS 方式：

HTML/JavaScript格式：

<html onselectstart='return false;'>
  <body>
    <h1>This is the Heading!</h1>
    <p>And I'm the text, I won't be selected if you select me.</p>
  </body>
</html>

HTML/CSS格式：

.not-selectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<body class="not-selectable">
  <h1>This is the Heading!</h1>
  <p>And I'm the text, I won't be selected if you select me.</p>
</body>

更好的是，您可以禁用文本选择。

如果你喜欢 Sass （SCSS），并且不想使用 Compass，你可以这样做：

styles.scss

@mixin user-select($select) {
    -webkit-touch-callout:#{$select};
    @each $pre in -webkit-, -moz-, -ms-, -o-, -khtml- {
        #{$pre + user-select}: #{$select};
    }
    #{user-select}: #{$select};
}

.no-select {
    @include user-select(none);
}

我将各种浏览器 CSS 选择属性与 Internet Explorer < 9 所需的不可选择标签相结合。

<style>
[unselectable="on"] {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer 10+/Edge */
    user-select: none; /* Standard */
}
</style>
<div unselectable="on">Unselectable Text</div>

快速黑客更新

如果将该值用于所有 CSS 属性（包括它的浏览器前缀），则仍可能出现问题。noneuser-select

.div {
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none;    /* Firefox all             */
    -ms-user-select: none;     /* Internet Explorer  10+  */
     user-select: none;        /* Likely future           */
}

正如 CSS-Tricks 所说，问题是：

WebKit 仍然允许复制文本，前提是您选择文本周围的元素。

您还可以使用下面的方法来选择整个元素，这意味着如果您单击一个元素，则该元素中包含的所有文本都将被选中。为此，您所要做的就是将值更改为 。enforcenoneall

.force-select {
    -webkit-user-select: all;  /* Chrome 49+     */
    -moz-user-select: all;     /* Firefox 43+    */
    -ms-user-select: all;      /* No support yet */
    user-select: all;          /* Likely future  */
}

如果你想用CSS禁用整个页面的选择和高亮显示，你可以轻松地将其应用于所有元素：

* {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome and Opera */
}

使用 CSS-

div {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -o-user-select: none;

  "unselectable='on' onselectstart="return false;"
  onmousedown="return false;
}

<div>
  Blabla
  <br/> More Blabla
  <br/> More Blabla...
</div>

::selection {background: transparent; color: transparent;}

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

这很容易做到：

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

或者：

假设您有一个 .你将不得不删除它的innerHTML ，在本例中为Hello， World。然后，您必须转到CSS并执行此操作：<h1 id="example">Hello, World!</h1>h1

#example::before // You can of course use **::after** as well.
{
    content: 'Hello, World!'; // Both single-quotes and double-quotes can be used here.

    display: block; // To make sure it works fine in every browser.
}

现在它只是认为它是一个块元素，而不是文本。

您可能还希望防止在触摸阻止选择的元素（如按钮）时出现上下文菜单。为此，请将以下代码添加到整个页面，或仅将这些按钮元素添加到其中：

$("body").on("contextmenu",function(e){
    return false;
});

使用 SASS（SCSS 语法）

你可以用 mixin 来做到这一点：

// Disable selection
@mixin disable-selection {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Safari */
    -khtml-user-select: none;    /* Konqueror HTML */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by Chrome and Opera */
}

// No selectable element
.no-selectable {
    @include disable-selection;
}

在 HTML 标记中：

<div class="no-selectable">TRY TO HIGHLIGHT. YOU CANNOT!</div>

在此 CodePen 中尝试一下。

如果您使用的是自动前缀，则可以删除其他前缀。

浏览器兼容性在这里。

这可能有效

    ::selection {
        color: none;
        background: none;
    }
    /* For Mozilla Firefox */
    ::-moz-selection {
        color: none;
        background: none;
    }

向 CSS 添加一个类，该类定义您不能选择或突出显示元素。我举个例子：

<style> 
    .no_highlighting{
        user-select: none;
    }

    .anchor_without_decoration:hover{
        text-decoration-style: none;
    }
</style>

<a href="#" class="anchor_without_decoration no_highlighting">Anchor text</a>

你试过这个吗？

.disableSelect{
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -o-user-select: none;
    -moz-user-select: none;

    pointer-events:none;
}

我看到许多详细的答案，但我相信只写这行代码就足以完成所需的任务：

*{
    -webkit-user-select: none;
 }

第一种方法：（完全是胡说八道）：

.no-select::selection, .no-select *::selection {
  background-color: Transparent;
}

.no-select { /* Sometimes I add this too. */
  cursor: default;
}

<span>RixTheTyrunt is da best!</span>
<br>
<span class="no-select">RixTheTyrunt is da best!</span>

片段：

.no-select::selection, .no-select *::selection {
  background-color: Transparent;
}

.no-select {
  /* Sometimes I add this too. */
  cursor: default;
}

<span>RixTheTyrunt is da best!</span>
<br>
<span class="no-select">RixTheTyrunt is da best!</span>

第二种方法（不包括废话）

.no-select {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

片段：

.no-select {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

<span>RixTheTyrunt is da best!</span>
<br>
<span class="no-select">RixTheTyrunt is da best!</span>

首先，解决问题。然后，编写代码。

约翰·约翰逊