::placeholder样式不生效主因是被重置样式覆盖或前缀缺失，需四套兼容写法、避免opacity、用class切换实现动态控制，并注意SSR首屏兜底。
Chrome/Firefox里::placeholder样式不生效？检查伪元素是否被重置
很多同学写::placeholder { color: #999; }后没效果，不是语法错，而是父级或全局样式里用了::-webkit-input-placeholder或::placeholder并设了color: transparent、opacity: 0这类覆盖规则。浏览器会按层叠顺序应用，后声明的伪元素样式可能被前面的同名规则干掉。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用开发者工具「Computed」面板查
::placeholder最终生效的color和opacity值，别只看「Styles」里你写的那条 - 如果项目用了重置库（如Normalize.css），它可能已对
::placeholder做了默认隐藏，得显式覆盖 - 确保选择器权重足够：比如
input::placeholder比::placeholder优先级高，更稳妥
::placeholder在Safari 15.4+才支持标准写法，老版本必须加私有前缀
Safari直到15.4才支持无前缀的::placeholder，之前只认::-webkit-input-placeholder。但光写这个不够——Firefox用::-moz-placeholder（单冒号），IE10–11用::-ms-input-placeholder，而且它们的语法细节不同。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须四套写全，顺序不能乱：
::placeholder放最后（覆盖前面的旧规则） -
::-moz-placeholder是单冒号，且只作用于<input>，<textarea>得另写textarea::-moz-placeholder - 避免用
!important，它在部分旧版Safari里会让::-webkit-input-placeholder完全失效
input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input::-ms-input-placeholder {
color: #777;
font-size: 14px;
}
设置opacity比color更容易出兼容问题
opacity会把整个占位符内容（包括文字、图标、甚至自定义背景）一起变透明，在IE和旧Edge里还可能让输入框失去焦点时提示文字不消失。而color只影响文字色，行为稳定得多。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
color+font-size+font-weight微调，别碰opacity - 真要半透明效果，用
color: rgba(119, 119, 119, 0.6)代替opacity: 0.6 -
line-height和padding别在::placeholder里设，它不继承这些属性，写了也无效
Vue/React里动态控制::placeholder？不行，得换思路
伪元素无法通过JS直接修改，ref拿到input元素后调style.setProperty('--placeholder-color', 'red')也没用——CSS变量不会自动注入到::placeholder里。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 需要动态变色？用class切换：
input.is-error::placeholder { color: #e74c3c; }，然后JS控制is-error类名 - 想完全自定义提示文案样式（比如加图标、换字体）？放弃
::placeholder，用绝对定位盖一层<span>，再用JS监听input的value长度来显示/隐藏 - SSR场景下注意：服务端渲染时
::placeholder样式不会触发，首屏可能显示浏览器默认灰字，得靠CSS优先级兜底
::placeholder就万事大吉，结果在Safari里空白一片，或者改了color却看到文字忽隐忽现——问题往往不在你写的那行代码，而在隔壁文件里一句没注意的input::-webkit-input-placeholder { opacity: 0 }。 
