本文摘自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可以匹配的元素示例:
1 2 3 4 |
|
以下是使用:read-write不可以匹配的元素,即使用:read-only可以匹配的元素示例:
1 2 3 4 5 |
|
尽管这是规范推荐的行为,但浏览器行为似乎有所不同:可能在一个浏览器中认为读写的内容在另一个浏览器中就会被认为是只读的,因此我们应用的:read-write样式可能不适用于某些浏览器。
就像其他伪类选择器一样,:read-write选择器和:read-only选择器都可以与其他选择器链接,比如:hover和伪元素::after。
例如,:read-write+:focus将为可编辑文本区域提供样式:
1 2 3 4 5 6 7 8 |
|
例如,:read-only + :hover将为页面上的div(常规)提供样式:
1 2 3 4 5 6 7 8 |
|
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
在Firefox浏览器中要使用前缀:-moz-read-write,-moz-read-only;且在Internet Explorer和Android上read-write选择器和read-only选择器无法被支持使用。
总结:以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。相关视频教程推荐:CSS3教程!
以上就是css3选择器:read-write和:read-only是什么?如何使用?的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
html5/CSS3 网页加载进度条的实现,下载进度条等经典案例
CSS3中background-clip实现图片裁切3种效果(代码实例 )
html5实践-使用CSS3如何完成google涂鸦动画的详解
更多相关阅读请进入《CSS3》频道 >>

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