css3选择器:read-write和:read-only指的是什么

这篇文章主要介绍了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://dzwzjz.com/article/ieeseg.html">http://dzwzjz.com/article/ieeseg.html</a> </div> </div> <div class="othernews"> <h3>其他资讯</h3> <div class="othernews_list"> <ul> <li> <a href="/article/pdsghh.html">Python中怎么操作tab文件</a> </li><li> <a href="/article/pdsgho.html">jsp引用css的方法</a> </li><li> <a href="/article/pdsgjc.html">pycharm运行python文件的方法</a> </li><li> <a href="/article/pdsgps.html">Feign整合Hystrix的方法</a> </li><li> <a href="/article/pdsgep.html">python如何将字符串逆序输出？</a> </li> </ul> </div> </div> </div> </div> <div class="footer"> <div class="footer_content"> <div class="footer_content_top clear"> <div class="content_top_share fl"> <div><img src="/Public/Home/img/logo.png"></div> <div class="top_share_content"> <dd>分享至：</dd> <dt class="bdsharebuttonbox clear" id="share"> <a href="#" class="bds_tsina iconfont fl" data-cmd="tsina" title="分享到新浪微博"></a> <a href="#" class="bds_sqq iconfont fl" data-cmd="sqq" title="分享到QQ好友"></a> <a href="#" class="bds_weixin iconfont fl" data-cmd="weixin" title="分享到微信"></a> <a href="#" class="bds_weixin iconfont fl" data-cmd="tieba" title="分享到贴吧"></a> </dt> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> </div> </div> <div class="content_top_left fl clear"> <div class="top_left_list fl"> <dd><a href="/about/">关于我们</a></dd> <dt> <a href="/about/#gsjj">公司简介</a> <a href="/about/#fzlc">发展历程</a> </dt> </div> <div class="top_left_list fl"> <dd><a href="/service/">服务项目</a></dd> <dt> <a href="/service/">高端网站建设</a> <a href="/miniprogram/">小程序开发</a> <a href="/service/app.html">APP开发</a> <a href="/service/yingxiao.html">网络营销</a> </dt> </div> <div class="top_left_list fl"> <dd><a href="/jianzhan/">建站知识</a></dd> <dt> <a href="/jianzhan/">行业新闻</a> <a href="/jianzhan/">建站学堂</a> <a href="/jianzhan/">常见问题</a> </dt> </div> <div class="top_left_list fl"> <dd><a href="/contact/">联系我们</a></dd> <dt> <a href="/contact/#lxwm">公司地址</a> <a href="/contact/#rczp">人才招聘</a> </dt> </div> </div> <div class="content_top_right addressR fr"> <div class="top_right_title addressf_title"> <a href="javascript:;" class="on">成都</a> <a href="javascript:;">达州</a> </div> <div class="top_right_content addressf"> <div class="right_content_li on"> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">电话：028-86922220</dt> </div> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">地址：成都市太升南路288号锦天国际A幢1002号</dt> </div> </div> <div class="right_content_li"> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">电话：028-86922220</dt> </div> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">地址：达州市南岸区弹子石腾龙大道58号2栋21-6</dt> </div> </div> </div> </div> </div> <div class="link"> 友情链接： <a href="http://seo.cdkjz.cn/" title="网络推广外包" target="_blank">网络推广外包</a>   <a href="http://www.cdxwcx.cn/tuoguan/jianyang.html" title="简阳电信机房" target="_blank">简阳电信机房</a>   <a href="http://seo.cdkjz.cn/quanwang/" title="网络推广外包" target="_blank">网络推广外包</a>   <a href="http://chengdu.kswjz.com/weixin/" title="微信营销" target="_blank">微信营销</a>   <a href="https://www.cdcxhl.com/" title="网站设计" target="_blank">网站设计</a>   <a href="https://www.cdxwcx.com/jifang/mianyang.html" title="绵阳托管服务器" target="_blank">绵阳托管服务器</a>   <a href="https://www.cdxwcx.com/city/luzhou/" title="泸州网站建设" target="_blank">泸州网站建设</a>   <a href="http://www.ncjike.cn/" title="青年旅行社" target="_blank">青年旅行社</a>   <a href="http://www.cxjianzhan.com/mobile/" title="手机网站制作" target="_blank">手机网站制作</a>   <a href="http://www.cxjianzhan.com/seo/" title="seo推广公司" target="_blank">seo推广公司</a>    </div> </div> <div class="footer_content_copyright clear">版权所有：青羊区大橙子信息咨询工作室 <a href="http://beian.miit.gov.cn/" rel="nofollow" target="_blank">蜀ICP备2022028542号-14</a> </div> </div> <!--浮窗--> <div class="FloatingWindow clear"> <a href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="FloatingWindow_list fr"> <div class="FloatingWindow_list_title"> <dd class="iconfont"></dd> <dt><span>在线</span>咨询</dt> </div> </a> <a href="javascript:;" class="FloatingWindow_list fr"> <div class="FloatingWindow_list_title"> <dd class="iconfont"></dd> <dt>服务热线</dt> </div> <div class="FloatingWindow_list_down fadeInRight animated">服务热线：028-86922220</div> </a> <a href="javascript:;" class="FloatingWindow_list fr STop"> <div class="FloatingWindow_list_title"> <dd class="iconfont"></dd> <dt>TOP</dt> </div> </a> </div> <script src="/Public/Home/js/jquery-1.8.3.min.js"></script> <script src="/Public/Home/js/comm.js"></script> <script src="/Public/Home/js/wow.js"></script> <script src="/Public/Home/js/common.js"></script> </body> </html> <script> $(".cont 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>