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伪类选择器匹配的是用户不可编辑的元素，即匹配任何不属于上面↑可编辑的任何元素。比如：设置了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编辑的常规元素->

 

　　尽管这是规范推荐的行为，但浏览器行为似乎有所不同：可能在一个浏览器中认为读写的内容在另一个浏览器中就会被认为是只读的，因此我们应用的:read-write样式可能不适用于某些浏览器。

 

　　就像其他伪类选择器一样，:read-write选择器和:read-only选择器都可以与其他选择器链接，比如:hover和伪元素::after。

 

　　例如，:read-write+:focus将为可编辑文本区域提供样式：

 

　　textarea:read-write:focus{

 

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

 

　　}

 

　　textarea:read-write:before{

 

　　content:"Typehere...";

 

　　color:#aaa;

 

　　}

 

　　例如，:read-only+:hover将为页面上的div（常规）提供样式：

 

　　div:read-only:hover{

 

　　background-color:#eee;

 

　　}

 

　　div:read-only:before{

 

　　content:"?";

 

　　color:deepPink;

 

　　}







本文转载自中文网