CSS 如何禁用文本选择高亮

在CSS中，我们可以使用select属性来禁用文本选择高亮。但是为了禁用文本，我们必须在CSS中应用一些属性，以使文本不能被选中或高亮显示。让我们通过一个示例来了解高亮和非高亮文本之间的区别。

Tutorialspoint - 文本被高亮显示。
Tutorialspoint – 文本未被高亮显示。

所使用的属性

在示例中使用了以下属性：

user-select - 此属性定义文本元素是否被用户选择。该属性受到Chrome和Opera浏览器的支持。
moz-user-select - 该属性与属性user-select的功能相同，Mozilla Firefox浏览器支持此属性。
webkit-text-select - IOS Safari浏览器支持该属性，与属性user-select的功能相同。
webkit-user-select - 该属性与属性user-select的功能相同，Safari浏览器支持此属性。

示例1

在此示例中，我们将首先使用h1元素设置文本的主标题，使用p元素设置文本段落。为了禁用段落上的文本选择高亮，将使用内部CSS来启动p元素的类，即“.no-highlight”。这个类将在浏览器属性user-select中设置值为none（Chrome和Opera浏览器将禁用文本选择）。

<!DOCTYPE html>
<html>
<title>Tutorialspoint</title>
<head>
   <style>
      .not-active{
         user-select: none; // chrome and Opera
      }
   </style>
</head>
<body>
   <center>
      <h1>The Story of Helen Keller</h1>
   </center>
   <p class="not-active">Helen Keller (born June 27, 1880, in Tuscumbia, Alabama, U.S.—died June 1, 1968, in Westport, Connecticut) was a blind and deaf American author and schoolteacher. Keller lost her eyes and hearing at the age of 19 months due to illness, and her speech development followed suit. Anne Sullivan (1866-1936), who taught her the names of things by pressing the manual alphabet into her palm, started instructing her five years later. Keller eventually learned to read and write in Braille. She was the author of several works, including The Story of My Life. (1902). William Gibson's play The Miracle Worker depicted her upbringing. (1959; film, 1962).</p>
   <p>
      <b>@tutorialspoint<b>
   </p>
</body>
</html>

示例2

在这个示例中，我们将使用p元素创建两个段落，来展示启用和禁用文本选择的差异。第一个段落是文本的简单展示，这意味着文本是启用的，但在第二个段落中，它设置了名为“ .no-highlight ”的类别。然后使用内部CSS将此引用，并通过对不同浏览器属性进行样式设置来禁用文本选择。

<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
   <style>
      .no-highlight{
         user-select: none; // chrome and Opera
         -moz-user-select: none; // Firefox
         -webkit-text-select: none; // IOS Safari
         -webkit-user-select: none; // Safari
      }
   </style>
</head>
<body>
   <h1>Disable the text selection highlighting using CSS</h1>
   <p>The text can be highlighted</p>
   <p class="no-highlight">The text cannot be highlighted</p>
</body>
</html>