::placeholder伪元素仅美化已通过placeholder属性设置的占位文字，不生成内容；必须手写四套浏览器前缀（::-webkit-input-placeholder、::-moz-placeholder、:-moz-placeholder、:-ms-input-placeholder）才兼容各环境，仅支持color、font-size、opacity等有限文本样式，禁用background、padding等盒模型属性。
::placeholder 伪元素本身不生成文字，只美化已通过 placeholder 属性定义的内容；没写 placeholder="xxx"，再全的 CSS 也出不来任何占位文字。
必须手写四套前缀，PostCSS 不会补全
现代浏览器支持 ::placeholder，但 Chrome ≤56、Firefox ≤19、IE 10–11、Edge ≤18 都不认它。漏掉任意一套，对应环境里就退回默认灰黑色小字。
-
input::-webkit-input-placeholder：覆盖 Chrome 49–56、Safari 9–15.3、Opera -
input::-moz-placeholder和input:-moz-placeholder（单冒号）：分别对应 Firefox 20+ 和 18–19，建议都写 -
input:-ms-input-placeholder：IE 10–11 唯一有效写法 -
input::placeholder：Chrome 57+ / Firefox 51+ / Safari 10.1+ / Edge 79+
别用 *::placeholder 这种泛选器——它无效；也别指望 PostCSS 插件自动加前缀，必须手动补全。
能设的样式非常有限，设了也白设的属性要避开
::placeholder 不是真实 DOM 元素，而是渲染层的文字投影，浏览器只允许它响应部分文本类属性。设了禁用属性不会报错，但会被静默丢弃，调试时容易卡住。
立即学习“前端免费学习笔记（深入）”；
- ✅ 支持：
color、font-size、font-family（需显式声明，不继承父级）、opacity（Firefox 默认0.53，常需重置为1）、text-align（对textarea有效） - ❌ 禁止：
background、padding、margin、border、width、height、display、visibility - ⚠️ 特别注意：
line-height: 1.4单独写无效；得塞进font简写里，比如font: 14px/1.4 "Segoe UI", sans-serif
Vue/React 中样式失效？不是框架问题，是作用域机制导致
Vue 的 <style scoped> 会给选择器自动加属性，比如把 input::placeholder 变成 input[data-v-xxx]::placeholder，但浏览器根本不支持带属性的选择器匹配伪元素。
- Vue 项目中必须用
:deep(input::placeholder)显式穿透 - React + CSS Modules 中得用
:global(input::placeholder)包裹规则 - 某些 UI 库（如 Element Plus、Ant Design）自带高优先级重置规则，比如
input { color: #333; }，会意外覆盖::placeholder的继承行为，需提高选择器权重或显式重写color
最常被忽略的点是：占位文字是否真的存在。检查 HTML 是否漏写了 placeholder 属性，再看浏览器是否在对应版本里识别你写的那条规则——这两步没确认，后面所有样式都是空中楼阁。
