应优先用 class 结合 type 属性精准定位，如 input[type="search"].header-search；避免单独使用宽泛的 [type="text"] 或纯标签选择器，以防止样式污染和动态元素漏匹配。
怎么用 [type] 属性精准定位不同类型的输入框
HTML 表单里， 元素靠 type 属性区分语义（比如 text、email、number、checkbox），CSS 可以直接用属性选择器抓取。关键不是“能不能”，而是“要不要全靠它”——单独用 [type="email"] 能选中所有 email 输入框，但容易误伤第三方组件或动态插入的元素（比如某些 UI 库会 clone input 并改 type）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先搭配
class使用，比如input[type="search"].header-search，既限定类型又锁定业务区域 - 避免写
input[type="text"]这种宽泛选择器，现代框架常把type="text"当默认值，结果样式污染整个表单 -
type="password"和type="text"渲染行为接近，但用户交互敏感，建议单独加 class 控制 visibility toggle 按钮等逻辑，别只靠 type 区分样式
为什么 .form-control 类名比单纯用标签更可靠
纯标签选择器如 input 或 textarea 太粗，会命中按钮、隐藏域甚至富文本编辑器里的 iframe 内 input；而类名是开发者主动赋予的语义锚点，可控性高。但要注意：类名不能解决“同名不同用”的问题——比如一个 .input-field 既用在登录页也用在搜索栏，样式需求却不同。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 按功能+状态组合类名，例如
.login-input--password、.search-input--mobile，比单纯.input更易维护 - 避免用
!important强行覆盖第三方库的类（如 Bootstrap 的.form-control），应通过更具体的选择器层级，比如.my-form .form-control - 如果项目用 CSS Modules 或 scoped style，类名天然隔离，此时
[type]属性反而可省，靠模块化命名就够了
当 [type] 和 class 同时存在，选择器优先级怎么算
CSS 权重规则里，属性选择器 [type="email"] 和类选择器 .field 权重相同（都是 10），谁在后面谁生效。但真实项目中，顺序常被构建工具打乱，靠顺序不可靠。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 显式叠加提升权重：写成
input.field[type="email"]（标签 + 类 + 属性 = 11 + 10 + 10 = 30），比单独.field或[type="email"]都高 - 不要依赖
input.input-text这种“标签+类”组合来覆盖第三方样式，因为 Bootstrap 4+ 的.form-control也是“标签+类”，权重一样，最终看源码顺序 - 真正需要强覆盖时，加一层父容器类，比如
.auth-form input[type="tel"]，既提高权重，又明确作用域
移动端表单输入框的特殊处理点
iOS Safari 对 type="number" 和 type="tel" 会自动唤起数字键盘，但它们的默认样式和光标表现不一致；Android 则可能忽略 type 直接弹出全键盘。这时候仅靠 [type] 选中，样式统一性会崩。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对
type="number"，额外加.numeric-input类，并用-webkit-appearance: none去掉原生 spinner，否则 iOS 上左右多出两个小箭头 -
type="tel"在部分安卓机上仍显示文字键盘，建议配合inputmode="numeric"（HTML 属性，非 CSS），再用[inputmode="numeric"]选择器做兜底样式 - 不要给
textarea加resize: none后就不管高度，用户粘贴长文本时内容会被截断，需配合min-height和max-height+overflow-y: auto
[type] 会漏样式；还有「伪元素干扰」，像 ::-webkit-inner-spin-button 这种，必须显式重置，不然 type=number 的 input 左右永远多两像素。 
