[type]属性选择器可精准控制不同input样式，无需class、兼容ie7+；需针对search清空按钮、number微调箭头、placeholder伪元素及:disabled/:required/:invalid状态做专项处理。
直接用 [type="xxx"] 就能精准控制不同 input 的样式，不用加 class、不污染 HTML 结构，而且浏览器支持极好（IE7+ 都行）。
用 [type] 区分文本、密码、邮箱等输入类型
不同 type 值对应不同语义和原生行为，样式也该有区分。比如密码框背景色偏灰、邮箱框边框带品牌蓝，这些靠属性选择器一行就能锁定。
-
input[type="text"]和input[type="search"]可共享基础样式，但后者在 Safari 里自带清空按钮，appearance: none对它无效，得用::-webkit-search-cancel-button单独处理 -
input[type="number"]在 Chrome/Firefox 会显示上下微调箭头，要隐藏必须同时写appearance: none和::-webkit-inner-spin-button { appearance: none; } -
input[type="email"]和input[type="url"]虽然都走文本流，但移动端键盘类型不同，样式上建议统一字体大小和行高，避免 iOS 键盘弹起时页面错位
用 [placeholder] 和 ::placeholder 控制提示文字
仅靠 [placeholder] 属性存在与否就能触发样式，但真正改颜色、透明度得靠伪元素 ::placeholder。注意它不是所有浏览器都支持同一套写法。
-
input[placeholder]可以统一加padding-left或设置opacity: 0.9，让带提示的输入框视觉更轻量 -
::placeholder必须加浏览器前缀才稳妥：::-moz-placeholder、::-webkit-input-placeholder、::placeholder三者都写上 - 不要对
::placeholder设font-weight: bold—— iOS Safari 会忽略，且部分安卓 WebView 渲染异常
用 :disabled、:required、:invalid 响应状态
这些伪类不是属性选择器，但和属性选择器配合最自然：比如 input:disabled[type="text"] 比单纯 input:disabled 更精确，避免误伤 select 或 button。
-
input:disabled默认灰色文字 + 灰色背景，但有些设计要求“禁用态仍保持浅色背景”，这时得显式重置background-color和color，否则 Windows 高对比度模式下可能不可读 -
input:required很适合加border-left: 2px solid #e74c3c这类视觉标记，但别只依赖颜色——色弱用户可能看不出，建议搭配title属性或辅助文本 -
input:invalid:not(:placeholder-shown)是判断“已输内容但校验失败”的关键组合，单独用:invalid会在空值时就触发，体验很差
真正难的不是写对选择器，而是记住哪些属性会触发浏览器默认样式重置（比如 appearance）、哪些伪元素必须加前缀、以及移动端键盘唤起时的布局塌陷。这些细节不调试根本看不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
