:read-only 和 :read-write 伪类仅响应 HTML 的 readonly 属性（非 JS 属性），仅对 input/textarea 原生生效，contenteditable 需验证，disabled 元素不匹配；:read-only 元素仍可聚焦和提交，而 :disabled 彻底禁用交互；IE 和旧 Safari 不支持，需 @supports 或属性选择器兜底。
:read-only 和 :read-write 伪类能直接响应 HTML 属性状态，但只对 input 和 textarea 原生生效；contenteditable 元素需额外验证支持，disabled 元素完全不参与匹配。
为什么 :read-only 样式没反应？检查 DOM 属性是否存在
浏览器只认 HTML 属性 readonly（布尔属性），不是 JS 属性 el.readOnly = true。即使 JS 设置了该属性，若未写入 DOM，伪类就不会触发。
- ✅ 正确写法：
el.setAttribute('readonly', '')或在 HTML 中直接写<input readonly> - ❌ 错误写法：
el.readOnly = true（DOM 里没出现readonly属性） - ⚠️ 注意：
<select></select>、<button></button>、自定义组件不支持:read-only，写了也白搭 - ? 检查方法：打开 DevTools → Elements 面板，确认目标元素标签上真有
readonly字样
:read-write 不等于“能输入”，它只是“没被声明为只读”
:read-write 匹配的是既无 readonly 又无 disabled 的可编辑表单控件——但它不会管 JS 是否锁了输入逻辑，也不会响应 contenteditable="false"。
- ✅
<input>默认匹配:read-write（只要没加readonly或disabled） - ❌
<input disabled>不匹配:read-write，也不匹配:read-only，只能用:disabled - ⚠️
<div contenteditable="true"> 能匹配 <code>:read-write，但 Safari 15.4 之前有兼容问题 - ? 实际建议：想样式区分“真正可编辑”，优先用
:read-write；只想按属性筛，用input:not([readonly])更稳 - ?️
:read-only元素仍可聚焦、可选中文本、可提交值；:disabled则彻底禁用交互、不提交、不获焦 - ? 样式覆盖靠 CSS 特异性或顺序：如果
input:disabled { opacity: 0.6; }写在后面，它会覆盖input:read-only的背景色 - ? 别混用：同一字段既
readonly又disabled是语义矛盾——要么允许复制提交（用readonly），要么彻底锁定（用disabled） - ? 真实场景示例：订单号展示框用
readonly + :read-only加浅灰背景+cursor: text；系统配置开关用disabled + :disabled加opacity和pointer-events: none - ✅ 推荐兜底方案：
@supports selector(:read-only) { ... }包裹新写法，老浏览器自动跳过 - ✅ 降级写法：用属性选择器
input[readonly]和input:not([readonly])写基础样式 - ✅ JS 检测注入（必要时）：
if (CSS.supports('selector(:read-only)')) { /* 加载专用 CSS */ } - ⚠️ 注意：
:not(:read-only)在 IE 中完全无效，别指望它做切换逻辑
和 :disabled 共存时，样式优先级与行为完全不同
:read-only 和 :disabled 可以同时存在（比如手动给元素加两个属性），但它们控制的不是同一维度：一个管编辑能力，一个管表单参与度。
立即学习“前端免费学习笔记（深入）”；
兼容性兜底必须手动做，IE 和老 Safari 不吃这套
IE 全系不支持这两个伪类；Safari 在 iOS 15.4 / macOS 12.3 之前对 input[type="number"] 的 :read-only 支持不全；Shadow DOM 中默认不穿透。
最常被忽略的一点是：伪类只反映静态属性状态，不监听运行时逻辑锁。JS 控制的“视觉只读”（比如拦截 input 事件）不会触发 :read-only，这时候你得自己加 class 或改属性。
