登录  /  注册
首页 > web前端 > css教程 > 正文

css3选择器:read-write和:read-only是什么?如何使用?

青灯夜游
发布: 2018-11-24 10:15:45
原创
2846人浏览过

本篇文章给大家带来的内容是介绍css3选择器:read-write和:read-only是什么?如何使用,让大家了解css3的:read-write选择器和:read-only选择器是什么,有什么作用,又是如何使用的。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

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可以匹配的元素示例:

< 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;
}
登录后复制

浏览器支持

2.jpg表格中的数字表示支持该属性的第一个浏览器版本号。

在Firefox浏览器中要使用前缀:-moz-read-write,-moz-read-only;且在Internet Explorer和Android上read-write选择器和read-only选择器无法被支持使用。

总结:以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。相关视频教程推荐:CSS3教程

以上就是css3选择器:read-write和:read-only是什么?如何使用?的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号