CSS禁止選中

一、CSS禁止選中代碼

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

用戶通常可以通過滑鼠或鍵盤選中文本，但在一些情況下，我們需要禁止用戶選中頁面上的文本，這時就需要使用CSS禁止選中代碼。通過將CSS屬性User-select設置為none，可以實現禁用選中操作。

這種方法也可以防止在頁面上拖動和選擇文字，從而保護網站的版權和隱私。

二、CSS禁止複製文字

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

除了禁止選中文字，我們還可以禁止用戶複製頁面上的文字。在一些保密性要求較高的網站中，禁止複製文字可以有效避免用戶將內容複製到其他地方進行傳播。

與禁止選中代碼類似，我們只需要在CSS中設置User-select為none即可禁用複製文字。

三、CSS禁止選中文本

   
   div {
       -webkit-touch-callout:none;
       -webkit-user-select:none;
       -khtml-user-select:none;
       -moz-user-select:none;
       -ms-user-select:none;
       user-select:none;
   }
   

在某些情況下，我們可能只想禁止選中部分文本而不是整個頁面。這時可以將上述CSS代碼應用到需要禁止選中文本的元素上，如div，span等。

這種方式可以實現選擇性禁用文本，同時保留其他文本的選中和複製功能。

四、CSS禁止選中圖片

   
   img {
       -webkit-user-drag:none;
       -moz-user-drag:none;
       -ms-user-drag:none;
       user-drag:none;
   }
   

除了禁止選中文字和文本外，我們同樣可以禁止用戶在網頁上拖動和保存圖片，保護圖片的版權和隱私。

通過將CSS屬性User-drag設置為none，可以阻止用戶拖動和保存圖片，從而實現禁止選中圖片的效果。

五、CSS禁止換行

   
   p {
       white-space:nowrap;
   }
   

在一些特殊的排版需求中，我們可能需要禁止文本自動換行。這時可以使用CSS屬性White-space將換行模式設置為nowrap，從而實現禁止換行的效果。

注意，將所有文本設置為nowarp會使得文本溢出父容器而無法正確顯示，因此我們只需將需要禁止換行的元素設置為nowrap即可。

六、CSS禁止點擊

   
   button {
       pointer-events:none;
   }
   

在某些情況下，我們需要禁止用戶點擊某個元素，如禁止操作一個按鈕等。這時可以使用CSS屬性Pointer-events將點擊事件禁用，從而實現禁止點擊的效果。

需要注意的是，該屬性的禁用效果是會冒泡的，即如果一個元素被禁止點擊，它的子元素也會被自動禁用點擊。

七、CSS禁止滾動

   
   body {
       overflow:hidden;
   }
   

在一些情況下，我們需要禁止用戶滾動頁面，如在模態框或其他需要鎖定頁面的場景中。這時可以使用CSS屬性Overflow將頁面滾動條設置為隱藏，從而實現禁止滾動的效果。

需要注意的是，隱藏滾動條並不代表禁用頁面滾動，用戶仍然可以通過其他手段來滾動頁面，因此在某些情況下，我們需要結合JavaScript一起使用來完全禁止頁面滾動。

八、CSS禁止複製

   
   ::selection {
       background-color:transparent;
   }
   

在一些情況下，我們需要禁止用戶使用滑鼠右鍵複製頁面內容。這時可以使用CSS偽元素Selection將選中文本的背景色設置為透明，使得選擇文字時無法看到高亮選中的效果，從而達到禁用複製的效果。

九、CSS禁止點擊事件

   
   a {
       pointer-events:none;
   }
   

在某些特殊場景中，我們需要禁止鏈接的點擊事件，如在麵包屑導航中禁用當前頁的鏈接等。這時可以使用CSS屬性Pointer-events將鏈接的點擊事件禁用，從而實現禁用點擊的效果。

需要注意的是，該屬性的禁用效果是會冒泡的，即如果一個鏈接被禁止點擊，它的父元素也會被自動禁用點擊。

十、CSS禁止頁面滾動選取

   
   body::-moz-selection {
       background-color:transparent;
   }
   body::selection {
       background-color:transparent;
   }
   

在某些情況下，我們需要禁止用戶在頁面上滾動選取文本，如在拖拽元素時，避免滾動條因為文本選中而滑動等。這時可以使用CSS偽元素Selection將選中文本的背景色設置為透明，使得選擇文字時無法看到高亮選中的效果，從而達到禁用滾動選取的效果。

需要注意的是，對於IE瀏覽器，使用::selection可能會出現兼容性問題，需要使用::-ms-selection來代替。