:read-write对contenteditable元素不生效是因为css规范明确限定其仅匹配原生表单控件（input、textarea、select），且需满足未设readonly、未设disabled、类型支持文本输入；div[contenteditable="true"]被浏览器排除在匹配范围外，须改用[contenteditable="true"]:focus等替代方案。
:read-write为什么对contenteditable元素不生效
它压根就不匹配——:read-write 伪类在标准中只对原生表单控件（input、textarea、select）生效，且仅当它们满足「未设 readonly、未设 disabled、类型支持文本输入」时才触发。浏览器明确将 div[contenteditable="true"] 排除在外，哪怕你加了 contenteditable="true"，也不会进入 :read-write 的匹配集。
常见错误是写成：[contenteditable]:read-write { border: 2px solid red; }，结果样式完全不应用。这不是兼容性问题，而是规范行为：CSS WG 明确规定该伪类不扩展到 contenteditable 元素。
替代方案：用:focus + 属性选择器精准控制
想让可编辑区域在获得焦点时加粗边框或高亮，直接用 :focus 配合属性判断更可靠：
-
input:not([readonly]):not([disabled]):focus—— 覆盖所有可编辑 input 场景，兼容 Safari/Chrome/Firefox -
textarea:not([readonly]):not([disabled]):focus—— 同理，避免:read-write:focus在 iOS 15.4 以下完全失效 -
[contenteditable="true"]:focus—— 对富文本容器生效，注意必须写死"true"字符串，[contenteditable]会匹配contenteditable=""或contenteditable="false"
额外建议：加 outline: none 并手动定义 border，避免系统默认焦点框和自定义边框叠加。
动态禁用/启用时样式不同步怎么办
:read-write 和 :read-only 是静态匹配，不响应 JS 修改 element.readOnly = false 这类操作。DOM 属性变了，但伪类不会重算。
- 改用 class 控制：比如添加
class="editable"/class="readonly"，再写.editable:focus和.readonly样式 - 需要强制重排？调用
el.classList.toggle("editable")后，再执行el.offsetHeight触发重排 - React/Vue 中，别依赖属性绑定自动更新伪类；用
className或显式同步状态
移动端长按复制与:focus冲突怎么处理
iOS Safari 长按时仍会弹出复制菜单，即使元素已 :focus，这跟 <code>:read-write 完全无关，但常被误认为“样式没生效”。
- 加
-webkit-touch-callout: none抑制气泡菜单（仅对非表单元素有效） - 对
[contenteditable="true"]，禁止长按需监听touchstart并e.preventDefault()，但注意别影响input和textarea的聚焦逻辑 - 真正要阻止选择，靠的是
user-select: none+contenteditable="false"组合，而不是伪类
记住一点：:read-write 不是活跃态的代理，它只回答“这个 input 理论上能不能写”，而用户是否正在编辑、有没有聚焦、会不会被长按选中——这些都得靠其他机制管。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
