:first-of-type对表单输入框常失效，因它只匹配同类型元素中第一个，若首个表单控件是textarea等非input标签，则input:first-of-type无法选中任何input；更可靠的方式是用input:nth-of-type(1)、:is(input,textarea,select):nth-child(1)或添加类名控制。
为什么 :first-of-type 对表单输入框常常失效
因为 :first-of-type 匹配的是「同类型元素中的第一个」，而表单里 <input> 往往混着 <textarea>、<select>、<button> 一起出现。如果第一个表单控件是 <textarea>，那 input:first-of-type 就根本选不到任何 <input> 元素——它只在所有 <input> 元素中找第一个，但前提是这些 <input> 真的按文档顺序连续排布且没被其他标签打断。
真正可靠的写法：用 :nth-of-type(1) 或结构定位
更稳妥的方式是明确限定父容器内第一个「可交互表单控件」，而不是依赖标签名。常见做法有：
- 如果所有输入控件都是
<input>，且它们是父元素下前几个子元素，用input:nth-of-type(1)比:first-of-type更直观（效果相同，但语义更稳） - 如果父容器里只有表单控件，直接用
form > :first-child——但注意：:first-child要求目标元素必须是父元素的第一个子节点，中间不能有文字、注释或其它标签 - 最通用的做法：给第一个输入框加个类，比如
<input class="first-field">，然后写.first-field { ... }——没有兼容性问题，逻辑清晰，调试时一眼能定位
实际 CSS 示例与对比
/* ❌ 可能不生效：input:first-of-type */
form input:first-of-type {
border-top: 2px solid #007bff;
}
<p>/<em> ✅ 更可控：限定在 form 下第一个 input 元素（不管它前面有没有 label）</em>/
form input:nth-of-type(1) {
border-top: 2px solid #007bff;
}</p><p>/<em> ✅ 推荐：用属性选择器匹配常见表单控件的第一个 </em>/
form > :is(input, textarea, select):nth-child(1) {
margin-top: 0;
}</p><p>/<em> ✅ 最稳妥：靠 HTML 配合，无歧义 </em>/
.first-field {
border-top: 2px solid #007bff;
}容易忽略的细节
:first-of-type 和 :nth-of-type(1) 在纯 <input> 序列中行为一致，但只要 DOM 中穿插了 <label>、<p> 或注释节点，:nth-child() 类选择器就会断掉。现代项目里，用语义化结构（如 <div class="form-group"> 包裹每个字段）再配合类名控制样式，比纯 CSS 选择器更可持续。浏览器对 :is() 的支持已覆盖 Chrome 100+、Firefox 100+、Safari 15.4+，但若需兼容 IE 或老安卓 WebView，仍得退回类名方案。
