CSS 如何防止双击时对 div 元素的高亮显示

在本文中，我们将介绍如何使用 CSS 来防止在双击 div 元素时出现高亮显示效果。

阅读更多：CSS 教程

问题描述

在网页开发中，有时候我们希望自定义某个 div 元素在双击时的行为，而不希望浏览器默认的行为——高亮显示选中的文本。那么，该如何在双击时禁用高亮显示呢？

使用 user-select 属性

在 CSS3 中，提供了一个 user-select 属性来控制文字的选择行为。我们可以使用该属性来防止 div 元素在双击时的高亮显示。

div {
  user-select: none;
}

通过将 user-select 属性设置为 none，可以禁止用户对该元素内的文字进行选择。这将阻止双击时的高亮显示效果。

示例演示

让我们通过一个示例来演示如何使用 CSS 来防止双击 div 元素时的高亮显示效果。

首先，我们创建一个 HTML 文件，包含一个 div 元素。

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      user-select: none;
      background-color: #f1f1f1;
      padding: 20px;
      font-size: 18px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div>
    双击我！
  </div>
</body>
</html>

在上述示例中，我们通过样式表将 div 的 user-select 属性设置为 none，并设置了一些其他的样式。

保存文件，并在浏览器中打开该文件。现在，当我们双击这个 div 元素，将不会出现高亮显示效果。