css3中user select的用法詳解

2022-08-05 15:39:20 字數 1448 閱讀 7847

user-select屬性是css3新增的屬性,用於設定使用者是否能夠選中文字。可用於除替換元素外的所有元素,以下是user-select的主要用法和注意事項的說明,更多資訊可參考如下css3文件說明。

user-select:none | text | all | element

預設值:text

適用範圍:除替換元素外的所有元素

none:文字不能被選擇

text:可以選擇文字

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

element:可以選擇文字,但選擇範圍受元素邊界的約束

以下圖列出的是值為none|text|all的情況下各個瀏覽器的支援程度;值為element時,大部分瀏覽器不支援,故不列出。

1.ie6-9不支援該屬性,但支援使用標籤屬性onselectstart="return false;"來達到user-select:none的效果;safarichrome也支援該標籤屬性;

2.直到opera12.5仍然不支援該屬性,但和ie6-9一樣,也支援使用私有的標籤屬性unselectable="on"來達到user-select:none的效果;unselectable的另一個值是off;

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

4.對應的指令碼特性為userselect

css**:

.box
html**:

這是測試資料

本文**於:猿2048→

css3 calc 的用法

說明 calc 四則運算 任何長度值都可以使用calc 函式進行計算 和平時的加減乘除優先順序一樣一樣的 特別注意 calc 裡面的運算子必須前後都留一個空格,不然瀏覽器識別不了,比如 calc 100 5px 相容性 html div class out div class in in div d...

css3的counter的用法

很早之前,計數器僅存在於ul,ol等元素中,如何想給其他元素增加計數,就只能通過list style image,或者background image來實現。不過現在css3增加了counter屬性,可以實現任何元素的計數作用。不過這個counter屬性還需要配合其他css屬性一起才能有效果。 首先...

CSS3 nth child N 的用法

h5標籤 nth child n 指定標籤父元素的第n個子元素的css樣式 1 doctype html 2 html 3 head 4 s...