:blank伪类未被任何主流浏览器支持，当前唯一可靠替代是:placeholder-shown；需配合placeholder属性使用，但无法识别纯空白字符串，精准检测必须依赖JavaScript监听input事件并trim判断。
浏览器根本不支持 :blank 伪类
目前（截至 Chrome 127、Firefox 128、Safari 17.6），:blank 伪类**未被任何主流浏览器实现**。它虽在 CSS Selectors Level 4 草案中提出，但仍是「草案状态」，连实验性前缀都不存在。你写 input:blank 或 textarea:blank，浏览器会直接忽略该规则，不会报错，也不会生效。
:placeholder-shown 是最接近的可用替代方案
如果你的真实需求是「当输入框为空且未获得焦点时显示某种样式」，:placeholder-shown 是当前唯一可靠的选择——它匹配的是**placeholder 可见时的状态**，而 placeholder 默认只在值为空字符串（value=""）且未聚焦时显示。
注意：它不检查内容是否“全是空白符”，但能覆盖绝大多数「用户还没输」的场景。
示例：
立即学习“前端免费学习笔记（深入）”；
input:placeholder-shown {
border-color: #ccc;
}
input:not(:placeholder-shown) {
border-color: #333;
}
⚠️ 容易踩的坑：
-
:placeholder-shown对type="number"等部分类型无效（Chrome 中 number 输入框无 placeholder 渲染逻辑） - 如果用户输入了空格、制表符或换行符（如
" "），:placeholder-shown仍为true（因为 placeholder 仍显示），但此时 DOMvalue已非空字符串 —— 这正是你想用:blank规避的问题 - 需确保 HTML 中写了
placeholder属性，否则伪类永不匹配
真要检测「纯空白字符串」只能靠 JavaScript
CSS 无法读取元素的 value 内容或执行 .trim() === "" 判断。必须用 JS 检测并切换 class：
const input = document.querySelector('input[data-blank-aware]');
input.addEventListener('input', () => {
const isEmpty = input.value.trim() === '';
input.classList.toggle('empty', isEmpty);
});
然后在 CSS 中写：
input.empty {
background-color: #fff8f8;
}
关键点：
- 监听
input事件（不是change），保证实时响应 - 用
.trim()去除首尾空白，再判空；不要只用value === "" - 避免在每次输入都重排样式，
classList.toggle是高效方式 - 如果输入框是动态创建的，记得对新节点也调用初始化逻辑
未来别依赖 :blank，它可能永远不会来
CSS WG 已多年未推进 :blank 实现，争议点在于语义模糊（“空白”指 Unicode 空白符？含不换行空格？是否考虑双向文本？）。更现实的路径是：用 JS 做精准判断 + class 驱动样式，或接受 :placeholder-shown 的行为边界。把逻辑放在 JS 层，反而更容易做单元测试和跨框架复用。
