真正可编辑的元素包括：input（除type="hidden"等不可输入类型外）、textarea、contenteditable="true"的元素；推荐用:read-write伪类或class="editable"方案实现样式控制。
要只选中可编辑的表单元素，用 :enabled 并不准确——它匹配的是“启用状态”的元素（如 input、select、textarea 等未被 disabled 的控件），但不等于“可编辑”。比如 input[type="radio"] 或 input[type="checkbox"] 是 :enabled 的，却不能输入文本。
真正可编辑的元素有哪些？
通常指用户能直接输入或修改内容的元素，主要包括：
-
input（除type="hidden"、"radio"、"checkbox"、"button"、"submit"、"reset"、"image"外） textarea- 带
contenteditable="true"的任意元素（如div、span）
纯 CSS 方案：组合伪类与属性选择器
CSS 本身无法判断 contenteditable 的布尔值真假，但可以匹配该属性是否存在：
input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):enabledtextarea:enabled-
[contenteditable="true"]（注意：也匹配contenteditable="TRUE"等大小写变体，但标准写法是小写；若需兼容，建议统一设为"true"）
可合并为：
立即学习“前端免费学习笔记（深入）”；
input:enabled:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
textarea:enabled,
[contenteditable="true"] {
/* 样式规则 */
}
更可靠的做法：加 class 标识
CSS 逻辑复杂易出错，且无法动态响应 contenteditable 值变化（如 JS 切换 "true"/"false"）。推荐在 HTML 中主动标记可编辑区域：
- 给所有预期可编辑的元素添加
class="editable" - 用
.editable统一控制样式，清晰、可控、可维护 - JS 动态切换时，同步增删该 class，避免样式失效
补充说明：:read-write 伪类
CSS 提供了 :read-write 伪类，理论上专用于匹配“可读写”的元素（即用户可编辑的内容），它会匹配：
- 启用的
input和textarea（排除只读/禁用/不可编辑类型） - 带有
contenteditable="true"的元素 - 非
readonly且非disabled的表单控件
写法简洁：
:read-write {
/* 可编辑元素的样式 */
}注意：:read-write 在现代浏览器（Chrome/Firefox/Safari/Edge）中支持良好，但 IE 完全不支持。如需兼容 IE，应回退到属性选择器组合方案或使用 class 控制。
