css3的選擇器:read-write和:read-only怎么使用

今天小編給大家分享一下css3的選擇器:read-write和:read-only怎么使用的相關知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

　　css3:read-write

　　:read-write是CSS中的一個偽類選擇器，它用于匹配用戶可編輯的元素，即可讀和可寫的元素。

　　屬于可編輯類別的元素包括：

　　1、不是只讀且未禁用的<input>元素（任何類型）。這意味著它們既沒有設置readonly屬性，也沒有設置disabled屬性。

　　2、既不是只讀也不是禁用的<textarea>元素（類似于input）。

　　3、不是<input>或<textarea>，但具有contenteditable屬性集的任何其他元素。

　　注意:目前,在大多瀏覽器中,:read-write選擇器只使用于設置了input和textarea元素。

　　css3:read-only

　　:read-only同樣也是CSS中的一個偽類選擇器，匹配任何與:read-write選擇器不匹配的元素。

　　換句話說，:read-only偽類選擇器匹配的是用戶不可編輯的元素，即匹配任何不屬于上面&uarr;可編輯的任何元素。比如：設置了readonly，或disabled等屬性的元素。

　　以下是使用:read-write可以匹配的元素示例：

　　<inputtype=“text”>

　　<inputtype=“number”>

　　<textareaname=“nm”id=“id”cols=“30”rows=“10”></textarea>

　　<divclass=“random”contenteditable></div>

　　以下是使用:read-write不可以匹配的元素，即使用:read-only可以匹配的元素示例：

　　<inputtype=“text”disabled>

　　<inputtype=“number”disabled>

　　<inputtype=“number”readonly>

　　<textareaname=“nm”id=“id”cols=“30”rows=“10”readonly></textarea>

　　<divclass=“random”></div><！-無法使用contenteditable編輯的常規(guī)元素->

　　盡管這是規(guī)范推薦的行為，但瀏覽器行為似乎有所不同：可能在一個瀏覽器中認為讀寫的內(nèi)容在另一個瀏覽器中就會被認為是只讀的，因此我們應用的:read-write樣式可能不適用于某些瀏覽器。

　　就像其他偽類選擇器一樣，:read-write選擇器和:read-only選擇器都可以與其他選擇器鏈接，比如:hover和偽元素::after。

　　例如，:read-write+:focus將為可編輯文本區(qū)域提供樣式：

　　textarea:read-write:focus{

　　box-shadow:002px1pxrgba(0,0,0,0.2);

　　}

　　textarea:read-write:before{

　　content:"Typehere...";

　　color:#aaa;

　　}

　　例如，:read-only+:hover將為頁面上的div（常規(guī)）提供樣式：

　　div:read-only:hover{

　　background-color:#eee;

　　}

　　div:read-only:before{

　　content:"?";

　　color:deepPink;

　　}

以上就是“css3的選擇器:read-write和:read-only怎么使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業(yè)資訊頻道。