共计 1363 个字符，预计需要花费 4 分钟才能阅读完成。
CSS :read-only伪类选择器用于匹配任何不可以被用户编辑的元素。
可以被用户编辑的元素包括：
- 任何不带
read-only属性，并且不是disabled类型的<input>元素。 - 任何不带
read-only属性，并且不是disabled类型的<textarea>元素。 - 除了
<input>元素和<textarea>元素之外，带contenteditable属性的任何其它元素。
:read-only伪类选择器可以匹配除上面列出的任何其它元素。
例如，下面的元素可以被 :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>
<!-- 不带 contenteditable 属性的普通元素 -->
<div class="random"> </div>下面的元素不能被 :read-only 伪类选择器选择，它们可以被 :read-write 伪类选择器匹配。
<input type="text">
<input type="number">
<textarea name="nm" id="id" cols="30" rows="10"> </textarea>
<div class="random" contenteditable> </div>示例代码
下面都是有效的 :read-only 规则。
.element:read-only:after {
content: "Subscribe!";
/* ... */
}
input:read-only {
background-color: #aaa;
border: 1px solid #888;
}
textarea:read-only:hover {cursor: not-allowed;}在线演示
在下面的例子中，如果你的浏览器支持 :read-write 伪类选择器，那么可编辑的元素的边框会显示为绿色。如果你的浏览器支持 :read-only 伪类选择器，那么可编辑的元素的边框会显示为橙色。
下面的 input 都是可编辑的，它们会被 :read-write 选择器匹配，边框变为绿色。
下面的 input 元素是 disabled 状态，不会被 :read-write 选择器匹配。
下面的 input 元素设置了 read-only 属性，是只读状态，它们会被 :read-only 选择器匹配。
下面的 div 元素带有 contenteditable 属性，它们会被 :read-write 选择器匹配。
Content Editable div
下面的 div 元素不带有 contenteditable 属性，它们会被 :read-only 选择器匹配。
Regular div
浏览器支持
目前只有 Chrome, Safari 和 Opera 14+ 以及 iOS 支持 :read-only 伪类选择器。
Firefox 浏览器需要添加 -moz- 前缀。
IE 和 Android 不支持 :read-only 伪类选择器。