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网别的相干文章！