:blank 对 input 无效，因其仅适用于非替换元素；input 是替换元素，内容由 value 属性控制，CSS 无法读取该值，故所有浏览器均不支持 input:blank。
input:blank 根本不会生效，这不是兼容性问题，是规范禁止
:blank 只匹配非替换元素（如 div、p）中“视觉上为空”的情况——忽略空白符、换行、注释后内容为空。但 input 和 textarea 是替换元素（replaced elements），其内容由 value 属性控制，而非子节点；CSS 无法读取或响应 value 的变化。因此：input:blank 语法合法，语义无效，所有浏览器均不支持，哪怕在 Safari 15.4+ 或 Chrome 120+ 开启实验 flag 也无用。
为什么 :empty 和 :placeholder-shown 也不适合“检测空值”
:empty 匹配不含任何子节点的元素，而 input 本来就没有子节点，所以 input:empty 永远为真——它不能区分“初始未赋值”和“用户清空后”，完全不可靠。:placeholder-shown 只在占位符可见时触发，即 value === '' 且 placeholder 属性存在；但它有严重局限：
• 用户删光内容后若 placeholder 被移除或未设置，该伪类立刻失效
• 它不感知 value 是否真的为空（例如通过 JS 设置 input.value = '' 但 placeholder 已消失）
• 与 :valid、:invalid 互斥，无法组合判断“空且非法”
真正可用的方案：JS 动态打标 + CSS 响应
必须用 JavaScript 监听输入行为，将 value 状态映射为自定义属性，再由 CSS 控制样式：
• 推荐监听 input 事件（覆盖键盘、粘贴、剪切、拖入等所有修改路径）
• 使用 trim() 判断是否“真正为空”，避免空格干扰
• 用 dataset 添加 data-empty 属性，比 class 更语义清晰且易维护
• 注意首次渲染时也要初始化状态（否则服务端渲染或 SSR 页面可能漏样式）
const input = document.querySelector('input');
const updateEmptyState = () => {
input.dataset.empty = input.value.trim() === '' ? 'true' : 'false';
};
input.addEventListener('input', updateEmptyState);
updateEmptyState(); // 初始化
CSS 中直接使用：input[data-empty="true"] { border-color: #e53e3e; }
容易被忽略的边界点
• textarea 同样不支持 :blank，原因一致：它是替换元素，且内容同步依赖 value 和 textContent，但浏览器明确将其排除在 :blank 适用范围外
• 不要用 input[value=""] 替代——它只匹配 HTML 中静态写死的 value=""，用户清空后 DOM 属性不会自动更新
• 若需兼容大量动态插入的输入框，别用 querySelectorAll 轮询，改用 MutationObserver 监听新增节点并绑定事件
• :blank 在生产环境连降级都难——@supports selector(:blank) 仅能测语法支持，无法测语义有效性，对 input 永远返回 false
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
