这篇文章主要介绍了css3选择器:read-write和:read-only指的是什么,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
创新互联是一家专业提供庆元企业网站建设,专注与网站制作、做网站、H5技术、小程序制作等业务。10年已为庆元众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。
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选择器:read-write和:read-only指的是什么内容对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,遇到问题就找创新互联,详细的解决方法等着你来学习!
网页名称:css3选择器:read-write和:read-only指的是什么
路径分享:https://www.cdcxhl.com/article46/ieeseg.html
成都网站建设公司_创新互联,为您提供企业建站、网站内链、外贸网站建设、网站建设、建站公司、自适应网站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联