:blank不能用于检测<input>或<textarea>是否为空，因其仅适用于非替换容器元素（如<div>），且规范明确排除替换元素；它不读取value属性，也无法响应动态内容变化，生产环境需用@supports降级并配合JS实现。
:blank 不能用于检测输入元素（如 <input>、<textarea>）是否“为空”。
:blank 是 CSS Selectors Level 4 提案中的伪类，只对容器型元素（如 <div>、<p>、<span>）有意义，它匹配“视觉上为空”的元素——即忽略空白符、换行、注释后内容为空。但它不适用于替换元素（replaced elements），而 <input> 和 <textarea> 正是典型的替换元素，其内容不由子节点决定，而是由属性（value）或用户输入控制。
常见错误现象：
- 写了
input:blank { border: 2px solid red; }却完全没效果 - 在 Chrome 120+ 开启实验性 flag 后仍不生效 —— 不是配置问题，是规范本身不支持
:blank 的实际适用范围非常窄：
立即学习“前端免费学习笔记（深入）”；
- 仅 Safari 15.4+ 原生支持（无需 flag）
- Chrome 120+ 需启用
chrome://flags/#enable-css-blank-pseudo（且仅对非替换元素） - Firefox 无原生支持（截至 2026 年 10 月）
- 所有浏览器均不支持
input:blank或textarea:blank
input 元素的“空值”状态必须靠属性或 JS 判断
<input> 是否为空，取决于它的 value 属性值，而非 DOM 子节点。CSS 无法读取属性值（value 不是 CSS 可访问的属性），因此：
-
:empty对<input>完全无效（它本就不含子节点，但也不“空”） -
:blank对<input>语法合法但语义无效（规范明确排除替换元素） - 没有纯 CSS 方案能响应
value === ''的变化
可行替代路径：
- 使用
input:not([value])匹配未设置value属性的初始状态（但无法捕获用户清空后的空值） - 用
input[value=""]匹配value=""的静态属性（但用户输入后属性不会自动更新） - 真实场景必须配合 JS：监听
input事件，动态添加/移除data-empty类input.addEventListener('input', () => { input.dataset.empty = input.value.trim() === '' ? 'true' : 'false'; });再写 CSS：input[data-empty="true"] { border-color: #ccc; }
为什么 textarea 也不能用 :blank
<textarea> 看似有文本子节点，但它的内容由 value DOM 属性和 textContent 双向同步，且浏览器将其归类为替换元素。即使你写成：<textarea></textarea>
或<textarea>\n \n</textarea>:blank 依然不匹配——不是兼容性问题，是规范禁止。
真正能用 :blank 的只有：
-
div:blank、p:blank、span:blank等非替换、非表单控件 - 必须确保它们没有子元素，且
textContent.trim()为'' - 生产环境务必包裹
@supports selector(:blank)降级
最易被忽略的一点：即使你用上了 :blank，它也不会响应动态内容变化（比如 JS 插入/清空文本），因为它是静态选择器，只在样式计算时评估一次 DOM 结构。需要实时反馈？JS 是唯一可靠路径。
