因为placeholder是浏览器渲染的独立伪内容，不继承input的color样式，仅影响用户输入文本，故直接设置input{color:red}对占位符无效；必须用::placeholder伪元素显式定义color等有限样式。
为什么 color 直接写在 input 上对占位符无效
因为 placeholder 是浏览器渲染的伪内容，不是真实 DOM 节点，也不继承父级样式。写 input { color: red; } 只影响用户输入的文字，占位符仍用默认灰（比如 #999 或 rgba(0,0,0,0.45)）。这不是 bug，是规范行为。
DevTools 里如果看到 ::placeholder 规则被划掉，说明被更高优先级样式覆盖；如果根本没出现，大概率是选择器写错了或浏览器不认。
- 别在 HTML 的
style属性里写placeholderstyle——HTML 不识别这个属性 - Vue 的
<style scoped>或 CSS-in-JS 默认隔离伪元素，得用:deep(input)::placeholder或提全局样式 -
font-family不会自动继承，必须单独声明，否则可能回退到系统字体 -
opacity在 Firefox 默认是0.53，常需显式设为1避免文字发虚
为什么只写 ::placeholder 样式经常不生效
Chrome ≤56、Firefox ≤19、IE10–11、旧 Edge 都不支持标准写法，必须补全四套前缀才真正兼容。漏掉任意一个，对应环境里就退回默认样式。
现代项目若要支持企业内网等旧环境（比如还在跑 IE11 的政企系统），光写 input::placeholder 就等于白写。
立即学习“前端免费学习笔记（深入）”；
-
::-webkit-input-placeholder：覆盖 Chrome/Safari/Opera/旧 Edge -
::-moz-placeholder和:-moz-placeholder（单冒号）都要写，否则 Firefox 18–19 完全不生效 -
:-ms-input-placeholder（IE10–11）和::-ms-input-placeholder（Edge 12–18）是两套语法，缺一不可 - PostCSS 不会自动补全这些伪元素前缀，必须手写；
*::placeholder这种泛选器无效
::placeholder 能用哪些 CSS 属性，哪些写了也白费
::placeholder 不是真实元素，浏览器只允许它响应有限的文本类样式。设了但没效果的属性会被静默丢弃，DevTools 里也看不到报错，容易反复调试却找不到原因。
- ✅ 支持：
color、font-size、font-family、opacity、text-align、line-height（Safari 易错位，慎用）、text-transform - ❌ 不支持：
background-color、padding、border、display、width、height、content - 别给
::placeholder加background：它不是画在 input 底层，而是叠在文字上，iOS Safari 下易闪烁或裁剪 -
line-height如果 input 本身设了，又没在::placeholder里重置，Safari 容易把文字压偏
怎么让 placeholder 在 focus 时立刻消失
原生行为是“空值 + 未聚焦”才显示，focus 本身不会隐藏它。想视觉上聚焦即隐，得靠 CSS 强制控制透明度。
- 推荐写法：
input:focus::placeholder { opacity: 0; transition: opacity 0.15s; }，比color: transparent更稳妥 - 别用
display: none：部分浏览器不支持，且触发重排 - 过渡时间别超
0.2s，否则用户可能看到残留文字 - 对
textarea同样有效，但要单独写textarea:focus::placeholder - 注意前提：HTML 中必须有
placeholder属性，否则伪元素无内容可作用
placeholder 属性提供——CSS 不能凭空生成它，所有样式都只是“美化已有内容”。漏掉这个属性，再全的伪元素规则也出不来一个字。 
