提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > css3选择器:read-write和:read-only是什么?怎样运用?【css教程】,css3,:read-write,:read-only,选择器

本篇文章给人人带来的内容是引见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能够婚配的元素示例:

< 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;
}

浏览器支撑

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

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

总结:以上就是本篇文章的全部内容,愿望能对人人的进修有所协助。相干视频教程引荐:CSS3教程!

以上就是css3选择器:read-write和:read-only是什么?怎样运用?的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"css3选择器:read-write和:read-only是什么?怎样运用?【css教程】,css3,:read-write,:read-only,选择器"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线