:read-only 和 :read-write 是css伪类，用于根据元素是否可编辑应用不同样式。1. :read-only 匹配设置了 readonly 属性或 contenteditable=”false” 的元素；2. :read-write 匹配未设置 readonly 或 contenteditable=”true” 的元素；3. disabled 元素不匹配 :read-only，需使用 :disabled；4. 它们可用于表单切换、验证反馈和代码展示等场景；5. 注意兼容性、contenteditable 行为差异及选择器特异性问题。正确使用这些伪类能提升用户体验并简化样式管理。
:read-only 和 :read-write 是 CSS 中非常实用的伪类，它们能让我们根据 HTML 元素是否处于可编辑状态来施加不同的样式。简单来说，就是区分那些只能看不能改的，和那些可以随意输入修改的元素，然后分别给它们“化妆”。
要使用它们，其实逻辑非常直接。当你有一个 input 字段或者 textarea，它们默认是可写的。如果你给它们加上 readonly 属性，它们就变成了只读。而 contenteditable 属性则能让任何元素变得可编辑。:read-only 会匹配那些用户无法编辑的元素。比如一个设置了 readonly 的 input，或者一个禁用了 contenteditable 的 div。:read-write 则相反，它匹配那些用户可以编辑的元素。这包括没有 readonly 属性的 input 或 textarea，以及设置了 contenteditable="true" 的元素。
/* 针对只读输入框的样式 */input:read-only { background-color: #f0f0f0; border: 1px dashed #ccc; cursor: not-allowed; color: #666;}/* 针对可编辑输入框的样式 */input:read-write { background-color: #fff; border: 1px solid #007bff; box-shadow: 0 0 5px rgba(0, 123, 255, 0.2); color: #333;}/* 针对可编辑的div */[contenteditable="true"]:read-write { outline: 2px solid #28a745; padding: 8px; min-height: 50px; background-color: #fff;}/* 针对不可编辑的div (虽然通常不会直接用:read-only去匹配contenteditable="false"的div，但理论上可以) */[contenteditable="false"]:read-only { background-color: #f9f9f9; border: 1px solid #eee; padding: 8px; color: #555;}
这里需要提一下，disabled 属性和 readonly 属性是不同的。disabled 的元素既不能编辑也不能提交，而 readonly 的元素虽然不能编辑，但其值仍会随表单提交。:read-only 伪类是针对 readonly 状态的，而非 disabled。这点有时候会让人有点混淆。
它们到底能用在哪些元素上？
这个问题问得好，因为一开始我总觉得它就只针对 input 和 textarea。但实际上，它的适用范围比我们想象的要广一些，也有些微妙的地方。
立即学习“前端免费学习笔记（深入）”；
最直观的，当然是那些标准的表单元素：
然后CSS可以这样写： JavaScript就只需要简单地切换属性： 这样，所有的样式切换都由CSS自动完成，JavaScript只负责逻辑，代码会变得非常清晰。 另一个场景是表单验证时的视觉反馈。当某个字段因为某种原因（比如数据正在加载，或者等待服务器验证结果）暂时不可编辑时，我们可以通过设置 还有，在一些需要展示代码或者配置文件的场景，我们可能会用 
(除了 hidden, radio, checkbox, button 等本身就不可编辑的类型) /* 默认只读样式 */input:read-only, textarea:read-only { border: none; background-color: transparent; cursor: default; color: #333;}/* 可编辑样式 */input:read-write, textarea:read-write { border: 1px solid #007bff; background-color: #fff; padding: 5px; cursor: text;}/* contenteditable的只读和可写样式 */[contenteditable="false"]:read-only { border: 1px dashed #eee; /* 提示区域，但不可编辑 */ background-color: #f9f9f9; padding: 5px;}[contenteditable="true"]:read-write { border: 2px solid #28a745; background-color: #fff; padding: 4px; min-height: 80px;}
function toggleEditMode() { const userName = document.getElementById('userName'); const userBio = document.getElementById('userBio'); const userTags = document.getElementById('userTags'); if (userName.readOnly) { // 当前是只读模式，切换到编辑 userName.readOnly = false; userBio.readOnly = false; userTags.contentEditable = "true"; } else { // 当前是编辑模式，切换到只读 userName.readOnly = true; userBio.readOnly = true; userTags.contentEditable = "false"; }}
readonly 属性，然后用 :read-only 伪类给它一个灰色的背景或者虚线边框，明确告诉用户“这里现在不能动”。这比直接 disabled 要好，因为 disabled 通常意味着这个字段在当前情境下是完全无效的，而 readonly 只是暂时锁住。