:placeholder-shown 无法直接控制清除按钮显示，因其仅反映 placeholder 可见性，而清除按钮由浏览器私有机制控制（如 chrome 的 ::-webkit-search-cancel-button），非标准 dom 节点，css 无法真正干预其存在性与生命周期。
为什么 :placeholder-shown 无法直接控制清除按钮显示
因为浏览器原生的清除按钮（type="search" 或 type="text" 输入框右端的 ×）不是通过 CSS 伪元素暴露给开发者控制的，:placeholder-shown 只能反映 placeholder 是否可见，它本身不触发清除按钮的显隐逻辑 —— 后者由浏览器私有机制决定，比如 Chrome 用 ::-webkit-search-cancel-button，Firefox 不支持该按钮，Safari 行为也不一致。
在 Chrome 中用 ::-webkit-search-cancel-button 配合 :placeholder-shown 控制显隐
Chrome 下可通过组合伪类实现「仅当输入框非空时显示清除按钮」的效果，但注意：必须使用 type="search"（type="text" 默认不显示该按钮），且清除按钮样式只能通过 ::-webkit-search-cancel-button 修改，不能用 display: none 完全移除（会失效），要用 opacity: 0 + pointer-events: none 模拟隐藏。
-
input[type="search"]:placeholder-shown::-webkit-search-cancel-button匹配「有 placeholder 且清除按钮存在」的状态，此时可隐藏它 -
input[type="search"]:not(:placeholder-shown)是输入后 placeholder 消失的状态，此时清除按钮自然可见（无需额外显示） - 必须加
appearance: none才能让自定义样式生效，否则浏览器保留默认外观
input[type="search"] {
appearance: none;
}
input[type="search"]:placeholder-shown::-webkit-search-cancel-button {
opacity: 0;
pointer-events: none;
}
为什么不用 input:not(:empty) 或 :has() 替代
:empty 对 <input> 无效（它永远不为空节点），:has() 虽然能写 input:has(:placeholder-shown)，但目前（2024）无浏览器支持对伪类的 :has 查询；更重要的是，清除按钮的 DOM 节点根本不在标准 HTML 树中，无法被任何 CSS 选择器“选中”或“条件渲染”，所有显隐控制都只是对浏览器渲染层的样式覆盖。
- 不要尝试
input:has(::placeholder)—— 语法非法，CSS 不允许在:has()内使用伪元素 - 不要依赖 JavaScript 监听
input事件来 toggle class —— 这可行但属于绕过 CSS 方案，和题设的伪类目标不符 - 移动端 Safari 对
::-webkit-search-cancel-button支持极差，部分版本完全不渲染该伪元素
真正可靠的跨浏览器方案其实是放弃原生清除按钮
如果你需要稳定控制清除按钮的显示/隐藏逻辑，唯一健壮的做法是禁用原生按钮（appearance: none + ::-webkit-search-cancel-button { display: none }），然后用一个绝对定位的 <button></button> 或伪元素模拟，并用 JS 绑定 input 事件监听值变化来控制其 visibility 或 opacity。这时候 :placeholder-shown 才真正变成一个可用的 CSS 触发条件 —— 但它只用于样式切换，不参与按钮的 DOM 存在性判断。
- 原生清除按钮的生命周期不受 CSS 控制，它的出现、点击行为、甚至是否渲染，都取决于浏览器内部状态机
-
:placeholder-shown的真假切换有延迟（例如快速输入时 placeholder 消失滞后），可能造成按钮闪现 - 如果项目需兼容 IE 或旧版 Edge，连
:placeholder-shown都不支持，必须降级到 JS 方案
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
