css3選擇器:read-write和:read-only是什麼？如何使用？

這篇文章帶給大家的內容是介紹css3選擇器:read-write和:read-only是什麼？如何使用，讓大家了解css3的:read-write選擇器和:read-only選擇器是什麼，有什麼作用，又是如何使用的。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

css3 :read-write

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

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

1、不是唯讀且未停用的元素（任何類型）。這意味著它們既沒有設定readonly屬性，也沒有設定disabled屬性。

2、既不是唯讀也不是禁用的元素（類似input）。

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

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

css3 :read-only

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

換句話說，:read-only偽類別選擇器符合的是使用者不可編輯的元素，即符合任何不屬於上面↑可編輯的任何元素。例如：設定了readonly，或disabled等屬性的元素。

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

< input  type = “text” >
< input  type = “number” >
< textarea  name = “nm”  id = “id”  cols = “30”  rows = “10” >  </ textarea >
< div  class = “random”  contenteditable >  </ div >

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

< input  type = “text”  disabled >
< input  type = “number”  disabled >
< input  type = “number”  readonly >
< textarea  name = “nm”  id = “id”  cols = “30”  rows = “10”  readonly >  </ textarea >
< div  class = “random” >  </ div >  <！ - 无法使用contenteditable编辑的常规元素 - >

儘管這是規範推薦的行為，但瀏覽器行為似乎有所不同：可能在一個瀏覽器中認為讀寫的內容在另一個瀏覽器中就會被認為是唯讀的，因此我們套用的:read-write樣式可能不適用於某些瀏覽器。

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

例如，:read-write :focus將為可編輯文字區域提供樣式：

textarea:read-write:focus {
    box-shadow: 0 0 2px 1px rgba(0,0,0,0.2);
}

textarea:read-write:before {
    content: "Type here...";
    color: #aaa;
}

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

div:read-only:hover {
    background-color: #eee;
}

div:read-only:before {
    content: "?";
    color: deepPink;
}

瀏覽器支援

表格中的數字表示支援該屬性的第一個瀏覽器版本號。

在Firefox瀏覽器中要使用前綴：-moz-read-write，-moz-read-only；且在Internet Explorer和Android上read-write選擇器和read-only選擇器無法被支援使用。

總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。相關影片教學推薦：CSS3教學！

以上是css3選擇器:read-write和:read-only是什麼？如何使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！