css3选择器:read-write和:read-only是什么？如何使用？-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

本篇文章给大家带来的内容是介绍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伪类选择器匹配的是用户不可编辑的元素，即匹配任何不属于上面↑可编辑的任何元素。比如：设置了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是什么？如何使用？的详细内容，更多文章请关注木庄网络博客！

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » css3选择器:read-write和:read-only是什么？如何使用？

css3选择器:read-write和:read-only是什么？如何使用？

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论