css3的选择器:read-write和:read-only怎么使用

今天小编给大家分享一下css3的选择器:read-write和:read-only怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

　　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编辑的常规元素->

　　尽管这是规范推荐的行为，但浏览器行为似乎有所不同：可能在一个浏览器中认为读写的内容在另一个浏览器中就会被认为是只读的，因此我们应用的: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;

　　}

以上就是“css3的选择器:read-write和:read-only怎么使用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网node.js频道。