在 CSS 中，我們可以使用 select 屬性來禁用文本選擇突出顯示。但要禁用該文本，我們必須在 CSS 中應用一些屬性，以便無法選擇或突出顯示該文本。讓我們舉個例子來了解突出顯示與非突出顯示文本之間的區別。
Tutorialspoint – 文本突出顯示。
Tutorialspoint – 文本未突出顯示。
使用的屬性
示例中使用了以下屬性 –
user-select – 該屬性定義用戶是否選擇文本元素。 Chrome 和 Opera 瀏覽器支持此屬性。
moz-user-select – 此屬性與 user-select 屬性的作用相同，并且 Mozilla Firefox 瀏覽器支持此屬性。
webkit-text-select – IOS safari 瀏覽器支持此屬性，并與用戶選擇屬性相同。
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>
登錄后復制
結論
我們通過啟用和禁用文本突出顯示來理解它的概念。在上面的輸出中，可以看到，當光標移動到文本時，第一個文本會突出顯示，而在第二段中，文本不會突出顯示，因為內部 CSS 中使用了禁用瀏覽器屬性。
以上就是如何使用 CSS 禁用文本選擇突出顯示？的詳細內容，更多請關注www.92cms.cn其它相關文章！
