扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
今天小编给大家分享一下css3的选择器:read-write和:read-only怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
创新互联建站长期为1000+客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为兴县企业提供专业的成都做网站、成都网站建设,兴县网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。
css3:read-write
:read-write是CSS中的一个伪类选择器,它用于匹配用户可编辑的元素,即可读和可写的元素。
属于可编辑类别的元素包括:
1、不是只读且未禁用的元素(任何类型)。这意味着它们既没有设置readonly属性,也没有设置disabled属性。
2、既不是只读也不是禁用的
3、不是或
注意:目前,在大多浏览器中,:read-write选择器只使用于设置了input和textarea元素。
css3:read-only
:read-only同样也是CSS中的一个伪类选择器,匹配任何与:read-write选择器不匹配的元素。
换句话说,:read-only伪类选择器匹配的是用户不可编辑的元素,即匹配任何不属于上面↑可编辑的任何元素。比如:设置了readonly,或disabled等属性的元素。
以下是使用:read-write可以匹配的元素示例:
以下是使用:read-write不可以匹配的元素,即使用:read-only可以匹配的元素示例:
尽管这是规范推荐的行为,但浏览器行为似乎有所不同:可能在一个浏览器中认为读写的内容在另一个浏览器中就会被认为是只读的,因此我们应用的: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怎么使用”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流