:placeholder-shown伪类仅在input有placeholder属性且value为空字符串时生效，不感知空格、光标或trim后状态，且受type、readonly、浏览器兼容性等限制，需结合JS同步class保障可靠性。
placeholder-shown伪类为什么有时不生效
因为 :placeholder-shown 只在输入框**有 placeholder 属性且内容为空**时才匹配，不是“占位符视觉消失”的实时监听器。一旦用户输入一个空格、按了退格删到空、甚至输入后全选粘贴覆盖，都可能意外触发或退出该状态——它只看 DOM 属性 + value 值是否为空字符串，不感知光标位置或用户意图。
- 必须写
placeholder="xxx"，仅靠 CSS::placeholder设置文字不行 -
type="number"或type="email"等表单控件在某些浏览器（如旧版 Safari）中不支持:placeholder-shown - 使用
value属性强制设为空（比如 Vue/React 中value=""）才能稳定触发；用defaultValue或未受控模式容易失效 - 当 input 被设为
readonly或disabled时，:placeholder-shown不会匹配
如何用:placeholder-shown切换布局（不是仅改颜色）
常见需求是“空时显示搜索图标+占位符，输入后收缩成紧凑搜索栏”，这需要配合 flex/grid 的结构变化，不能只靠 opacity 或 visibility。关键是把布局切换逻辑压进同一选择器链里，避免 JS 干预。
- 用
:placeholder-shown控制父容器的grid-template-columns或flex子项顺序 - 慎用
display: none切换，会导致表单焦点丢失或动画跳变；优先用visibility: hidden; height: 0; overflow: hidden;组合 - 如果要过渡 layout 变化，得配合
min-width/flex-basis动画，纯 grid-template-columns 无法 transition
input:placeholder-shown + .search-icon {
display: block;
}
input:not(:placeholder-shown) + .search-icon {
display: none;
}
:placeholder-shown 和 :focus-within 的组合陷阱
想实现“空且聚焦时显示提示，输入后隐藏”，直接套用 input:placeholder-shown:focus 是错的——聚焦时若已输入，:placeholder-shown 已不成立，整个选择器失效。真正要的是“空 || 聚焦”逻辑，但 CSS 没有 OR 运算符。
- 不要写
input:placeholder-shown:focus，它等价于“既空又聚焦”，覆盖不了“空但没聚焦”的初始态 - 更可靠的做法是：用
:placeholder-shown处理空态样式，再用:focus-within在父容器上单独控制聚焦反馈（比如外边框高亮），两者职责分离 - 如果必须联动，把状态判断交给 JS，加 class 如
is-empty或has-input，CSS 只响应 class
兼容性与降级方案怎么写才不翻车
IE 完全不支持 :placeholder-shown，Firefox 51+、Chrome 47+、Safari 9.1+ 支持，但 Safari 对 contenteditable 或 shadow DOM 内 input 表现不稳定。
立即学习“前端免费学习笔记（深入）”；
- 用
@supports selector(:placeholder-shown)包裹增强样式，老浏览器自动跳过 - 降级时默认按“已输入”状态设计 UI，即把
:placeholder-shown样式当作“增强”，而非基础功能 - 别依赖它做表单验证可见性（比如空时才显示错误提示），那应该用 JS + ARIA 控制
aria-invalid和aria-describedby
:placeholder-shown 不 trim。用户输个空格就卡在“非空”态，布局切不回去。这事得前端自己用 JS 监听并同步 class，CSS 伪类只是辅助，不是状态源。 
