::placeholder仅美化已定义的placeholder属性内容，需写全四套浏览器前缀且不能用泛选器；仅支持有限文本样式，不支持盒模型属性；框架中需穿透作用域才能生效。
::placeholder 本身不能添加提示词，只能美化已通过 placeholder 属性定义好的文字。没写 placeholder="xxx"，CSS 再全也出不来任何内容。
必须写全四套前缀，否则旧浏览器直接退回默认灰黑
只写 ::placeholder 在 Chrome 57+、Firefox 51+、Edge 79+ 里能用，但 Safari ≤15.3、IE10–11、旧 Edge（12–18）压根不识别——它们各自依赖不同前缀，漏一个就断层：
-
input::-webkit-input-placeholder：覆盖 Chrome ≤56、Safari 9–15.3、Opera、旧 Edge -
input::-moz-placeholder和input:-moz-placeholder：Firefox 19+ 用双冒号，18 及更早要单冒号（虽可忽略，但保底建议保留） -
input:-ms-input-placeholder：IE10–11 唯一有效写法（注意是单冒号） -
input::-ms-input-placeholder：Edge 12–18（双冒号），和 IE 的写法不能混用
PostCSS 不会自动补这些，必须手写；*::placeholder 这种泛选器无效，必须精确到 input::placeholder 或 textarea::placeholder。
只支持有限文本样式，设了 background/padding 也没用
::placeholder 是渲染层的投影，不是真实 DOM 元素，浏览器静默丢弃不支持的属性，DevTools 里也不报错，容易白调半天：
立即学习“前端免费学习笔记（深入）”；
- ✅ 能用：
color、font-size、font-family（不继承父级，必须显式声明）、opacity（Firefox 默认 0.53，常需重置为1）、line-height（单独写无效，得塞进font简写里） - ❌ 禁止：
background、padding、margin、border、width、height、display—— 设了也不渲染，还可能干扰输入框盒模型 - ⚠️ 特别小心：
line-height: 1.4单独声明在 Safari 容易错位；iOS Safari 下加background可能闪烁或裁剪
Vue/React 里样式失效？不是框架问题，是作用域隔离
Vue 的 <style scoped></style> 会给选择器自动加属性，比如 input::placeholder 变成 input[data-v-xxx]::placeholder，但浏览器不支持带属性的选择器匹配伪元素：
- Vue 中必须用
:deep(input::placeholder)显式穿透 - React + CSS Modules 要用
:global(input::placeholder) - 即使没用框架，也要检查是否被 UI 库（如 Ant Design）的高优先级规则覆盖，比如全局
input { color: #333; }会意外影响伪元素继承
最常被忽略的是：父级 color 没重置、font-family 没显式声明、或者忘了 opacity: 1 导致 Firefox 下文字过淡——这些细节不修，样式就“看起来没生效”。
