这篇文章主要介绍了css3选择器:read-write和:read-only指的是什么，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

创新互联是一家专业提供庆元企业网站建设,专注与网站制作、做网站、H5技术、小程序制作等业务。10年已为庆元众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

css3 :read-write

:read-write是CSS中的一个伪类选择器，它用于匹配用户可编辑的元素，即可读和可写的元素。

属于可编辑类别的元素包括：

1、不是只读且未禁用的元素（任何类型）。这意味着它们既没有设置readonly属性，也没有设置disabled属性。

2、既不是只读也不是禁用的元素（类似于input）。</p><p>3、不是<input>或<textarea>，但具有contenteditable属性集的任何其他元素。</p><p>注意: 目前, 在大多浏览器中, :read-write 选择器只使用于设置了input 和 textarea 元素。</p><p><strong>css3 :read-only</strong></p><p>:read-only同样也是CSS中的一个伪类选择器，匹配任何与:read-write选择器不匹配的元素。</p><p>换句话说，:read-only伪类选择器匹配的是用户不可编辑的元素，即匹配任何不属于上面↑可编辑的任何元素。比如：设置了readonly，或disabled等属性的元素。</p><p>以下是使用:read-write可以匹配的元素示例：</p><pre>< input type = “text” > < input type = “number” > < textarea name = “nm” id = “id” cols = “30” rows = “10” > </ textarea > < div class = “random” contenteditable > </ div ></pre><p>以下是使用:read-write不可以匹配的元素，即使用:read-only可以匹配的元素示例：</p><pre>< 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编辑的常规元素 - ></pre><p>尽管这是规范推荐的行为，但浏览器行为似乎有所不同：可能在一个浏览器中认为读写的内容在另一个浏览器中就会被认为是只读的，因此我们应用的:read-write样式可能不适用于某些浏览器。</p><p>就像其他伪类选择器一样，:read-write选择器和:read-only选择器都可以与其他选择器链接，比如:hover和伪元素::after。</p><p>例如，:read-write+:focus将为可编辑文本区域提供样式：</p><pre>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; }</pre><p>例如，:read-only + :hover将为页面上的div（常规）提供样式：</p><pre>div:read-only:hover { background-color: #eee; } div:read-only:before { content: "?"; color: deepPink; }</pre><p><strong>浏览器支持</strong></p><p><img src="/upload/otherpica42/11415.jpg" alt="css3选择器:read-write和:read-only指的是什么">表格中的数字表示支持该属性的第一个浏览器版本号。</p><p>在Firefox浏览器中要使用前缀：-moz-read-write，-moz-read-only；且在Internet Explorer和Android上read-write选择器和read-only选择器无法被支持使用。</p><p>感谢你能够认真阅读完这篇文章，希望小编分享css3选择器:read-write和:read-only指的是什么内容对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，遇到问题就找创新互联，详细的解决方法等着你来学习!</p> <br> 标题名称：css3选择器:read-write和:read-only指的是什么 <br> URL网址：<a href="http://cdweb.net/article/ieeseg.html">http://cdweb.net/article/ieeseg.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/jhiojs.html">Linux性能监控工具有哪些</a> </li><li> <a href="/article/jhidos.html">使用linux的cupsenable命令启动指定的打印机</a> </li><li> <a href="/article/jhioei.html">如何通过Mesh投影来实现贴花系统</a> </li><li> <a href="/article/jhiohp.html">机器学习之优雅落地线性回归法</a> </li><li> <a href="/article/jhidde.html">js数据类型检测总结</a> </li> </ul> </div> </div> </div> <footer> <div class="footop"> <div class="wrap"> <div class="bottomrpw"> <div class="erp arp"> <dl> <dt>ADDRESS</dt> <dd class="address"> <i class="icon"></i> <span class="word">成都市青羊区锦天国际1号楼1002室</span> </dd> </dl> </div> <div class="erp arp"> <dl> <dt>TEL</dt> <dd class="phonum"> <i class="icon"></i> <span class="word en"> <a href="tel:18980820575">18980820575</a> </span> </dd> </dl> </div> <div class="erp crp"> <dl> <dt>OTHER</dt> <dd> <a class="word get-quote">获得报价与方案</a> </dd> <dd> <a href="#" target="_blank" rel='nofollow' class="word" title="付款方式">付款方式</a> </dd> </dl> </div> <div class="erp code-rp"> <dl> <dt>Wechat</dt> <dd class="code-wrap"> <span class="code"> <img src="/Public/Home/images/qr-code.jpg" alt="快上网微信公众号" /> </span> </dd> </dl> </div> </div> </div> </div> <div class="footerbot"> <div class="friendlinks"> <div class="wrap"> <ul class="rpl"> <li><a href="http://www.cdhuace.com/vi.html" title="VI设计" target="_blank">VI设计</a></li><li><a href="http://www.cqcxhl.com/" title="重庆做网站" target="_blank">重庆做网站</a></li><li><a href="http://www.cdhuace.com/fuwu.html" title="成都名片印刷" target="_blank">成都名片印刷</a></li><li><a href="http://www.scmwjz.com/" title="网站建设开发" target="_blank">网站建设开发</a></li><li><a href="https://www.cdxwcx.com/400/" title="成都400电话办理" target="_blank">成都400电话办理</a></li><li><a href="http://m.xwcx.net/phone/" title="做手机网站" target="_blank">做手机网站</a></li><li><a href="http://www.cdfuwuqi.com/host/" title="虚拟主机" target="_blank">虚拟主机</a></li><li><a href="http://chengdu.cdcxhl.com/weixin/" title="微信公众号二次开发" target="_blank">微信公众号二次开发</a></li><li><a href="http://www.cxhljz.cn/wechat/" title="微商城开发" target="_blank">微商城开发</a></li><li><a href="https://www.cdxwcx.com/jifang/meishan.html" title="联通机柜租用" target="_blank">联通机柜租用</a></li> </ul> </div> </div> <div class="wrap"> <div class="copyright"> <span class="en">©2007-2022</span> 成都快上网科技有限公司 <span class="en">ALL RIGHTS RESERVED.</span> <a rel="nofollow" href="http://www.miitbeian.gov.cn" target="_blank">蜀ICP备19037934号</a> </div> </div> </div> </footer> <div class="fcwrap"> <ul class="rpl clearfix"> <li class="phone"> <a rel="nofollow" target="_blank" href="tel:18980820575"> <i class="icon"></i> <strong>18980820575</strong> </a> </li> <li class="qq"> <a rel="nofollow" target="_blank" href="https://wpa.qq.com/msgrd?v=1&uin=244261566&site=qq&menu=yes"> <i class="icon"></i> <strong>244261566</strong> </a> </li> <li class="back-top"> <a href="javascript:void(0)" rel="nofollow" class="back-to-top"> <i class="icon"></i> <strong>回到顶部</strong> </a> </li> </ul> </div> <!--nav--> <div class="n-Wrap"> <div class="navBar visble show"> <div class="barlogo"> <a href="/" rel="nofollow"> <img src="/Public/Home/images/logo1.png" alt="成都做网站" /> <img src="/Public/Home/images/logo2.png" alt="成都网站设计" /> </a> </div> <div class="bmenu"> <i class="bar-top"><span></span></i> <i class="bar-cen"><span></span></i> <i class="bar-bom"><span></span></i> <i class="bar-left"><span></span></i> <i class="bar-right"><span></span></i> </div> </div> <section class="fixmenu"> <div class="close-bar"> <i class="bar-left"><span></span></i> <i class="bar-right"><span></span></i> </div> <nav class="smph"> <ul> <li class="index-hrefs on"><a href="http://www.cdweb.net/"><font>首页</font></a></li> <li><a href="/about/" rel="nofollow"><font>关于快上网</font></a></li> <li><a href="/service/" rel="nofollow"><font>服务范围</font></a></li> <li><a href="/case/" rel="nofollow"><font>案例展示</font></a></li> <li><a href="/solve/" rel="nofollow"><font>解决方案</font></a></li> <li><a href="/news/" rel="nofollow"><font>建站资讯</font></a></li> <li><a href="/contact/" rel="nofollow"><font>联系快上网</font></a></li> </ul> <div class="pwrap"> <span class="label">服务热线</span> <strong class="phone"><a href="tel:18980820575">18980820575</a></strong> </div> </nav> </section> </div> <!--end nav--> <script src="/Public/Home/js/hotcss.js"></script> <script type="text/javascript" src="/Public/Home/js/su_new.js"></script> </body> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>