: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或显式同步状态</li> </ul> <H3>移动端长按复制与:focus冲突怎么处理</H3> <p>iOS Safari 长按时仍会弹出复制菜单，即使元素已 <code>:focus
，这跟:read-write完全无关，但常被误认为“样式没生效”。- 加
-webkit-touch-callout: none抑制气泡菜单（仅对非表单元素有效） - 对
[contenteditable="true"]，禁止长按需监听touchstart并e.preventDefault()，但注意别影响input和textarea的聚焦逻辑 - 真正要阻止选择，靠的是
user-select: none+contenteditable="false"组合，而不是伪类
记住一点：
:read-write不是活跃态的代理，它只回答“这个 input 理论上能不能写”，而用户是否正在编辑、有没有聚焦、会不会被长按选中——这些都得靠其他机制管。 - 加
