:blank不能用于检测或是否为空，因其仅适用于非替换容器元素（如），且规范明确排除替换元素；它不读取value属性，也无法响应动态内容变化，生产环境需用@supports降级并配合js实现。
:blank 不能用于检测输入元素（如 <input>、<textarea></textarea>）是否“为空”。
常见错误现象： 可行替代路径： 真正能用 最易被忽略的一点：即使你用上了 :blank 是 CSS Selectors Level 4 提案中的伪类，只对容器型元素（如 <div>、<code><p></p>、<span></span>）有意义，它匹配“视觉上为空”的元素——即忽略空白符、换行、注释后内容为空。但它不适用于替换元素（replaced elements），而 <input> 和 <textarea></textarea> 正是典型的替换元素，其内容不由子节点决定，而是由属性（value）或用户输入控制。
input:blank { border: 2px solid red; } 却完全没效果 :blank 的实际适用范围非常窄：
chrome://flags/#enable-css-blank-pseudo（且仅对非替换元素） input:blank 或 textarea:blank
input 元素的“空值”状态必须靠属性或 JS 判断<input> 是否为空，取决于它的 value 属性值，而非 DOM 子节点。CSS 无法读取属性值（value 不是 CSS 可访问的属性），因此：
:empty 对 <input> 完全无效（它本就不含子节点，但也不“空”） :blank 对 <input> 语法合法但语义无效（规范明确排除替换元素） value === '' 的变化
input:not([value]) 匹配未设置 value 属性的初始状态（但无法捕获用户清空后的空值） input[value=""] 匹配 value="" 的静态属性（但用户输入后属性不会自动更新） 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></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 是唯一可靠路径。
