国产视频app有一些網站的站長朋友們,為了防止自己網站的內容被復制,或者出于某中原因不想讓網站中某個DIV元素中的文字被訪客選中,想出了各種各大樣的招數。今天本飛鳥慕魚的博主就和大家說一說,如何利用CSS3的屬性,來禁止網頁或是某個DIV元素中的文字被鼠標選中。

CSS屬性禁止網頁文字被選中

国产视频appCSS3中有個user-select屬性,這個屬性可以設置某個DIV元素中的文本不被選中,下面就詳細的說一下

国产视频appCSS3中user-select屬性

css屬性user-select介紹

這個user-select有四個值,分別為:none | text | all | element ,它的默認值為:text

none:文本不能被選擇

text:可以選擇文本

all:當所有內容作為一個整體時可以被選擇。如果雙擊或者在 上下文上點擊子元素,那么被選擇的部分將是以該子元素 向上回溯的最高祖先元素。

Element:可以選擇文本,但選擇范圍受元素邊界的約束

瀏覽器的支持情況

如下圖

user-select使用介紹,網頁文字禁止選中,css禁止用戶選擇文本,網頁禁止選中文字,禁止文本選中

詳細說明

国产视频app1.IE6-9不支持該屬性,但支持使用標簽屬性 onselectstart=”return false;”來達到 user-select:none 的效果;Safari和Chrome也支持該標簽屬性;

国产视频app2.直到Opera12.5仍然不支持該屬性,但和IE6-9一樣,也支持使用私有的標簽屬性 unselectable=”on” 來達到 user-select:none的效果;unselectable 的另一個值是off;

3.除Chrome和*Safari外,在其它瀏覽器中,如果將文本設置為 -ms-user-select:none;,則用戶將無法在該文本塊中開始選擇文本。不過,如果用戶在頁面的其他區域開始選擇文本,則用戶仍然可以繼續選擇將文本設置為 -ms-user-select:none; *的區域文本;

国产视频app4.對應的腳本特性為userSelect

user-select示例說明

禁止鼠標選中整個網頁的文字

代碼

body{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

如圖:

user-select使用介紹,網頁文字禁止選中,css禁止用戶選擇文本,網頁禁止選中文字,禁止文本選中

禁止某個DIV中的文本不被鼠標選中

代碼

.mochu{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

如圖

user-select使用介紹,網頁文字禁止選中,css禁止用戶選擇文本,網頁禁止選中文字,禁止文本選中

国产视频app以上就是,如何利用CSS3來禁止整個網頁中的文字或是某個元素中的文字被選中的教程,如果你感覺有什么問題,或是有什么好的關于網站設計,PHP教程類的文章,可以發布到本博客哦!

如果你感覺此文對你有用,可以點個贊或是打賞一下小編哦!