id选择器必须以#开头且页面中id值唯一，否则会导致getelementbyid或自动化工具只返回首个匹配项；应避免动态id、注意大小写及特殊字符转义，并优先使用data-testid等稳定属性替代不可靠的id。
ID选择器必须用#开头，且页面中ID值应唯一
用 # 加 ID 值是最直接的定位方式，但前提是目标元素确实有 id 属性，且该 ID 在整个页面里只出现一次。浏览器不强制校验唯一性，但重复 ID 会导致 document.getElementById() 或 Selenium 的 find_element_by_id() 只返回第一个匹配项，Playwright 的 page.locator("#my-id") 也默认取首个——这在自动化测试或 DOM 操作中极易引发误判。
- 检查元素是否存在
id：右键审查元素，确认属性是id="submit-btn"而不是class="submit-btn"或data-id="submit-btn" - 避免用动态生成的 ID：如
id="btn-12345"这类含时间戳或随机数的值，每次加载都变，无法稳定定位 - 注意大小写和特殊字符：HTML 中 ID 允许含连字符（
-）、下划线（_），但不能以数字开头；CSS 选择器中若 ID 含.、#等符号，需转义，例如#user.name应写成#user\.name
在不同工具中写法一致，但行为细节有差异
#login-form 这个字符串在原生 JS、Selenium、Playwright、requests-html 中都能用，但底层逻辑不同：原生 document.querySelector("#login-form") 返回单个元素；Selenium 的 find_element_by_css_selector("#login-form")（已弃用）或新版 find_element(By.CSS_SELECTOR, "#login-form") 也只返回一个 WebElement；而 Playwright 的 locator() 默认支持多匹配，需显式加 .first() 或 .nth(0) 才等价于“取第一个”。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- requests-html 的
r.html.find("#header", first=True)必须加first=True，否则返回列表，哪怕只有一个匹配项 - Playwright 中
page.locator("#search-input").fill("test")可直接操作，但如果页面存在多个同 ID 元素（虽不合理），它会作用于第一个——不会报错，但结果不可靠 - 不要混用 ID 和其他选择器拼接，比如
div#main：虽然语法合法，但冗余且降低可读性；#main本身已足够精确
当 ID 不稳定或缺失时，别硬凑，换思路
实际项目中，很多前端框架（React/Vue）生成的元素没有 ID，或 ID 是哈希值（如 id=":r2:"），此时强行用 ID 选择器等于自找麻烦。与其反复调试转义或正则匹配，不如退一步用更健壮的替代方案：
- 优先看有没有稳定的
data-testid或data-cy属性——这是为测试预留的“官方接口”，比 ID 更可靠 - 用属性选择器兜底：比如
button[type="submit"]、input[name="email"]，语义明确且不易变动 - 组合类名 + 标签：如
form.login-form button，比依赖 ID 更适应组件化结构
#xxx，而是判断这个 xxx 是否真的适合作为锚点——尤其在现代前端框架下，ID 往往是被刻意隐藏或动态生成的。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
