CSS - 停止在双击时突出显示div元素的实例教程

在本教程中，我们将学习如何使用CSS在双击一个div元素时停止高亮显示。

考虑一下，我们的HTML中有下面这个div元素。

<div>
   <p>
      Lorem Ipsum is simply dummy text of the printing
      and typesetting industry. Lorem Ipsum has been the
      industry's standard dummy text ever since the 1500s.
   </p>
</div>

如果我们在浏览器中双击一个div元素，它将被默认高亮显示，为了防止这种行为，请遵循下面的教程。

要想在双击时停止突出显示div元素，我们可以将css属性user-select 设置为 "none "值。

下面是一个例子。

<div class="disable">
   <p>
      Lorem Ipsum is simply dummy text of the printing
      and typesetting industry. Lorem Ipsum has been the
      industry's standard dummy text ever since the 1500s.
   </p>
</div>

.disable-text-selection{
   -moz-user-select:none; /* firefox */
   -webkit-user-select: none; /* Safari */
   -ms-user-select: none; /* IE*/
   user-select: none; /* Standard syntax */
}

在上面的例子中，我们为user-select 属性添加了浏览器的前缀，所以它在所有的浏览器中都能正常工作。

用户选择的css属性控制了HTML元素的文本选择行为。

通过设置一个值为none 的user-select 属性，我们可以禁用HTML元素上的文本选择高亮。

如果你想停止对整个网页而不是某个特定元素的高亮显示，你可以在你的body 标签中添加以下CSS属性。

body {
   -moz-user-select:none; /* firefox */
   -webkit-user-select: none; /* Safari */
   -ms-user-select: none; /* IE */
   user-select: none; /* Standard syntax */
}