精准匹配表单元素应优先用元素选择器限定范围，再叠加属性条件；如select用select，textarea用textarea，input[type="hidden"]要完整书写；避免仅用[disabled]等宽泛属性导致误匹配。
直接用 [type="submit"] 这类写法就能精准匹配，但实际中容易因属性值大小写、空格、动态生成内容或浏览器兼容性翻车。
区分 [type="text"] 和 [type^="text"] 的真实差异
表单控件的 type 值常被 JS 动态改写（比如从 "text" 变成 "text email"），这时 [type="text"] 就完全失效；而 [type^="text"] 能匹配所有以 "text" 开头的值，更鲁棒。
-
[type="email"]：只匹配type="email"的<input>，不匹配type="email tel" -
[type~="email"]：匹配class那种空格分隔的多值，但type属性本身不支持多值语义，所以这个写法在表单里基本没用 -
[type*="tel"]：能匹配type="tel"或type="input-tel"，适合自定义 type 前缀场景
处理 <select></select>、<textarea></textarea> 和隐藏域的特殊写法
它们没有 type 属性，不能靠 [type] 匹配。得换思路：
-
select：直接用元素选择器select，或加属性如select[multiple]、select:disabled -
textarea：同理，用textarea或textarea[required] -
input[type="hidden"]：这是唯一合法且稳定的写法；别用[type="hidden"]单独写，容易误命中其他带type的元素（比如自定义 Web Component）
避免被 data- 属性或框架注入干扰
现代框架（React/Vue）常在 input 上加一堆 data- 属性，比如 data-v-12345，但这些不影响 CSS 选择器逻辑——除非你手抖写了 [data-v] 这种宽泛匹配，反而把非表单元素也拉进来了。
- 错误示范：
[disabled]→ 会匹配所有禁用元素，包括button、fieldset，甚至第三方组件 - 正确做法：
input:disabled或input[disabled]，显式限定元素类型 - 更稳妥：
input:not([type="hidden"]):disabled，排除隐藏域再禁用匹配
真正难的不是写对选择器，而是意识到 HTML 属性值可能被运行时修改、框架注入、服务端模板拼接污染——所以优先用元素名限定范围，再叠加属性条件，比纯靠属性匹配可靠得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
