只写 ::placeholder 在 safari 或 firefox 里颜色不生效，因旧版浏览器（safari 10.1–15.3、firefox 4–50）完全不支持该标准语法；新版浏览器虽支持，但若前缀规则顺序错误或缺失，会回退至默认浅灰色。
为什么只写 ::placeholder 在 Safari 或 Firefox 里颜色不生效
因为 Safari 10.1–15.3、Firefox 4–50、旧版 Edge（EdgeHTML）根本不认标准写法，直接跳过整条规则；而新版浏览器（Chrome 57+、Firefox 51+、Safari 16+）虽支持 ::placeholder，但若你把它写在带前缀规则前面，反而会被低版本规则覆盖——浏览器只取它第一个能识别的匹配项。更关键的是，Firefox 默认给 ::-moz-placeholder 加了约 opacity: 0.54，只设 color 不设 opacity: 1，实际文字会发灰甚至不可见。
input::placeholder 必须和哪些前缀一起写才真正兼容
以下四组必须同时存在，且顺序不能错：
-
input::-webkit-input-placeholder：覆盖 Chrome、Safari、Opera、新版 Edge（Blink/WebKit 内核） -
input::-moz-placeholder：Firefox 19+（双冒号），注意它不支持!important，也别漏掉opacity: 1 -
input:-moz-placeholder：Firefox 4–18（单冒号），已淘汰但部分内网老系统仍需兜底 -
input:-ms-input-placeholder：IE 10–11 和旧版 Edge（EdgeHTML），::-ms-input-placeholder在新版 Edge 中已被弃用 -
input::placeholder：标准写法，必须放在最后，确保现代浏览器走这条路径
漏掉任意一条，对应浏览器就会回退到系统默认 placeholder 颜色（通常是极浅灰或透明），尤其 input::-moz-placeholder 和 input::placeholder 位置颠倒时，Firefox 可能完全不渲染样式。
小红书长文-谷歌浏览器
下载
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
设置透明度时 opacity 和 rgba() 的区别与取舍
opacity 在 Chrome/Safari/Edge 中工作正常，但在 Firefox（尤其是 ::-moz-placeholder）中被忽略——这是硬性限制，不是 bug。所以：
- 如果只要纯色（如
#999），统一加opacity: 1即可 - 如果需要半透效果（如浅灰 + 60% 透明），必须用
color: rgba(153, 153, 153, 0.6)，并在所有前缀规则里重复写 - 绝对不要混用：
color: #999; opacity: 0.6在 Firefox 下等价于color: #999; opacity: 1，结果比预期更显眼
容易被忽略的两个细节：选择器写法和继承陷阱
常见失效原因不是前缀漏了，而是这两处手滑：
- 必须写成
input::placeholder，不能只写::placeholder——后者在所有浏览器中都无效 - 避免用
color: inherit或color: currentcolor，Safari 会继承input的border-color或background-color，导致 placeholder 文字变成黑/白/透明，尤其在深色主题下彻底消失 - 如果同时作用于
textarea，得单独补上textarea::placeholder等对应规则，不能靠通配符
最稳妥的做法是复制粘贴一个最小可用块，然后只改 color 值——多写几行比反复调试强。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
